diff options
Diffstat (limited to 'assets/js/hamburger.js')
| -rw-r--r-- | assets/js/hamburger.js | 83 |
1 files changed, 0 insertions, 83 deletions
diff --git a/assets/js/hamburger.js b/assets/js/hamburger.js deleted file mode 100644 index 1d27633..0000000 --- a/assets/js/hamburger.js +++ /dev/null @@ -1,83 +0,0 @@ -/** - * hamburger.js - * Hamburger menu toggle with focus trap and keyboard navigation - */ - -export function initHamburger() { - 'use strict'; - - const hamburgerBtn = document.getElementById('hamburger-btn'); - const menuOverlay = document.getElementById('menu-overlay'); - const menuLinks = document.querySelectorAll('.menu-links a'); - const themeSwitch = document.getElementById('theme-switch'); - - if (!hamburgerBtn || !menuOverlay) return; - - // Toggle menu on hamburger click - hamburgerBtn.addEventListener('click', () => { - const isOpen = hamburgerBtn.getAttribute('aria-expanded') === 'true'; - setMenuOpen(!isOpen); - }); - - // Close menu on overlay click - menuOverlay.addEventListener('click', (e) => { - if (e.target === menuOverlay) { - setMenuOpen(false); - } - }); - - // Close menu on menu link click - menuLinks.forEach((link) => { - link.addEventListener('click', () => { - setMenuOpen(false); - }); - }); - - // Close menu on Escape key - document.addEventListener('keydown', (e) => { - if (e.key === 'Escape') { - setMenuOpen(false); - } - }); - - // Focus trap: Tab through menu items and theme switch - menuOverlay.addEventListener('keydown', (e) => { - if (e.key !== 'Tab') return; - - const focusableElements = Array.from( - menuOverlay.querySelectorAll('a, button') - ); - const firstElement = focusableElements[0]; - const lastElement = focusableElements[focusableElements.length - 1]; - - if (e.shiftKey) { - if (document.activeElement === firstElement) { - lastElement.focus(); - e.preventDefault(); - } - } else { - if (document.activeElement === lastElement) { - firstElement.focus(); - e.preventDefault(); - } - } - }); - - function setMenuOpen(isOpen) { - hamburgerBtn.setAttribute('aria-expanded', isOpen); - hamburgerBtn.classList.toggle('active', isOpen); - menuOverlay.classList.toggle('active', isOpen); - - if (isOpen) { - document.body.style.overflow = 'hidden'; - // Focus the first menu link - const firstLink = menuLinks[0]; - if (firstLink) { - setTimeout(() => firstLink.focus(), 100); - } - } else { - document.body.style.overflow = ''; - hamburgerBtn.focus(); - } - } -} |
