diff options
Diffstat (limited to 'themes')
| -rw-r--r-- | themes/danix-xyz-hacker/assets/js/menu.js | 39 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html | 4 |
2 files changed, 21 insertions, 22 deletions
diff --git a/themes/danix-xyz-hacker/assets/js/menu.js b/themes/danix-xyz-hacker/assets/js/menu.js index 257736b..f61e60b 100644 --- a/themes/danix-xyz-hacker/assets/js/menu.js +++ b/themes/danix-xyz-hacker/assets/js/menu.js @@ -1,51 +1,52 @@ document.addEventListener('DOMContentLoaded', () => { - // Get the menu toggle button and overlay const menuToggle = document.getElementById('menu-toggle'); const menuOverlay = document.getElementById('menu-overlay'); + const menuPanel = document.getElementById('menu-panel'); - /** - * Toggle menu visibility and state - */ function toggleMenu() { - const overlay = document.getElementById('menu-overlay'); - const menuPanel = document.querySelector('[x-ref="menuPanel"]'); - - if (!overlay || !menuPanel) return; + if (!menuOverlay || !menuPanel) return; // Toggle overlay visibility classes - overlay.classList.toggle('opacity-0'); - overlay.classList.toggle('invisible'); + menuOverlay.classList.toggle('opacity-0'); + menuOverlay.classList.toggle('invisible'); // Toggle menu panel translation menuPanel.classList.toggle('translate-x-full'); // Control body overflow - const isMenuOpen = !overlay.classList.contains('opacity-0'); + const isMenuOpen = !menuOverlay.classList.contains('opacity-0'); document.body.style.overflow = isMenuOpen ? 'hidden' : ''; } + function closeMenu() { + if (!menuOverlay || menuOverlay.classList.contains('opacity-0')) return; + toggleMenu(); + } + // Toggle menu when clicking the hamburger button if (menuToggle) { menuToggle.addEventListener('click', toggleMenu); } - // Close menu when clicking on the overlay (but not the panel itself) + // Close menu when clicking on the overlay if (menuOverlay) { menuOverlay.addEventListener('click', (e) => { - // Only close if clicking the overlay itself, not the menu panel if (e.target === menuOverlay) { - toggleMenu(); + closeMenu(); } }); } + // Close menu when clicking menu items + const menuLinks = document.querySelectorAll('#menu-panel a, #menu-panel button'); + menuLinks.forEach(link => { + link.addEventListener('click', closeMenu); + }); + // Close menu on Escape key document.addEventListener('keydown', (e) => { - if (e.key === 'Escape') { - const overlay = document.getElementById('menu-overlay'); - if (overlay && !overlay.classList.contains('opacity-0')) { - toggleMenu(); - } + if (e.key === 'Escape' && menuOverlay && !menuOverlay.classList.contains('opacity-0')) { + closeMenu(); } }); }); diff --git a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html index 6eeddd4..c22981b 100644 --- a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html +++ b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html @@ -1,12 +1,10 @@ <div id="menu-overlay" class="fixed inset-0 bg-black/50 backdrop-blur opacity-0 invisible transition-all duration-200 z-40" - @click="closeMenu()" > <div + id="menu-panel" class="fixed top-0 right-0 h-screen w-full max-w-sm bg-bg border-l border-border overflow-y-auto transform translate-x-full transition-transform duration-300 z-50" - @click.stop - x-ref="menuPanel" > <!-- Close button --> <div class="flex items-center justify-between p-6 border-b border-border"> |