1 files changed, 71 insertions, 11 deletions

diff --git a/themes/danix-xyz-hacker/assets/js/menu.js b/themes/danix-xyz-hacker/assets/js/menu.js
index f61e60b..3f32642 100644
--- a/themes/danix-xyz-hacker/assets/js/menu.js
+++ b/themes/danix-xyz-hacker/assets/js/menu.js
@@ -1,26 +1,59 @@
 document.addEventListener('DOMContentLoaded', () => {
   const menuToggle = document.getElementById('menu-toggle');
   const menuOverlay = document.getElementById('menu-overlay');
-  const menuPanel = document.getElementById('menu-panel');
+  const menuPanel = document.getElementById('hamburger-menu');
 
-  function toggleMenu() {
+  function openMenu() {
     if (!menuOverlay || !menuPanel) return;
 
-    // Toggle overlay visibility classes
-    menuOverlay.classList.toggle('opacity-0');
-    menuOverlay.classList.toggle('invisible');
+    // Show overlay
+    menuOverlay.classList.remove('opacity-0');
+    menuOverlay.classList.remove('invisible');
+
+    // Slide menu in
+    menuPanel.classList.remove('translate-x-full');
 
-    // Toggle menu panel translation
-    menuPanel.classList.toggle('translate-x-full');
+    // Manage accessibility
+    menuToggle.setAttribute('aria-expanded', 'true');
+    menuPanel.removeAttribute('aria-hidden');
 
     // Control body overflow
-    const isMenuOpen = !menuOverlay.classList.contains('opacity-0');
-    document.body.style.overflow = isMenuOpen ? 'hidden' : '';
+    document.body.style.overflow = 'hidden';
+
+    // Focus first focusable element in menu
+    const firstFocusable = menuPanel.querySelector('a, button');
+    if (firstFocusable) {
+      setTimeout(() => firstFocusable.focus(), 50);
+    }
   }
 
   function closeMenu() {
     if (!menuOverlay || menuOverlay.classList.contains('opacity-0')) return;
-    toggleMenu();
+
+    // Hide overlay
+    menuOverlay.classList.add('opacity-0');
+    menuOverlay.classList.add('invisible');
+
+    // Slide menu out
+    menuPanel.classList.add('translate-x-full');
+
+    // Manage accessibility
+    menuToggle.setAttribute('aria-expanded', 'false');
+    menuPanel.setAttribute('aria-hidden', 'true');
+
+    // Restore body overflow
+    document.body.style.overflow = '';
+
+    // Return focus to toggle button
+    menuToggle.focus();
+  }
+
+  function toggleMenu() {
+    if (menuOverlay && menuOverlay.classList.contains('opacity-0')) {
+      openMenu();
+    } else {
+      closeMenu();
+    }
   }
 
   // Toggle menu when clicking the hamburger button
@@ -38,7 +71,7 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   // Close menu when clicking menu items
-  const menuLinks = document.querySelectorAll('#menu-panel a, #menu-panel button');
+  const menuLinks = document.querySelectorAll('#hamburger-menu a, #hamburger-menu button');
   menuLinks.forEach(link => {
     link.addEventListener('click', closeMenu);
   });
@@ -49,4 +82,31 @@ document.addEventListener('DOMContentLoaded', () => {
       closeMenu();
     }
   });
+
+  // Focus trap: keep tab within menu when open
+  if (menuPanel) {
+    menuPanel.addEventListener('keydown', (e) => {
+      if (e.key !== 'Tab') return;
+
+      const focusableElements = menuPanel.querySelectorAll('a, button, [tabindex]:not([tabindex="-1"])');
+      if (focusableElements.length === 0) return;
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      const isMenuOpen = !menuOverlay.classList.contains('opacity-0');
+
+      if (!isMenuOpen) return;
+
+      // Shift+Tab on first element: move to last
+      if (e.shiftKey && document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement.focus();
+      }
+      // Tab on last element: move to first
+      else if (!e.shiftKey && document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement.focus();
+      }
+    });
+  }
 });