summaryrefslogtreecommitdiffstats
path: root/assets/js/hamburger.js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/js/hamburger.js')
-rw-r--r--assets/js/hamburger.js83
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();
- }
- }
-}