feat: add header nav and hamburger menu styling with JS handlers

- Add header, nav-link, header-actions component CSS
- Add menu-overlay and menu-nav component CSS
- Update hamburger-menu.html with vanilla JS handlers:
  - openMenu/closeMenu functions
  - ESC key support
  - Click outside to close (backdrop click)
  - Menu link auto-close
  - Scroll lock when menu open
- Replace Alpine @click with id-based event listeners
- Rebuild CSS: main.min.css updated

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

1 files changed, 64 insertions, 3 deletions

diff --git a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
index 666db78..4260456 100644
--- a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
+++ b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
@@ -1,17 +1,17 @@
 <div
   id="menu-overlay"
-  class="fixed inset-0 bg-black/50 backdrop-blur opacity-0 invisible transition-all duration-200 z-40"
+  class="fixed inset-0 bg-black/50 backdrop-blur opacity-0 invisible transition-all duration-300 z-40"
+  aria-hidden="true"
 >
   <div
     id="hamburger-menu"
-    aria-hidden="true"
     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"
   >
     <!-- Close button -->
     <div class="flex items-center justify-between p-6 border-b border-border">
       <span class="font-bold text-lg text-accent font-oxanium">Menu</span>
       <button
-        @click="closeMenu()"
+        id="menu-close"
         aria-label="{{ i18n "closeMenu" }}"
         class="p-2 hover:bg-surface rounded transition-colors"
       >
@@ -65,3 +65,64 @@
   </div>
 </div>
 
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const menuToggle = document.getElementById('menu-toggle');
+    const menuClose = document.getElementById('menu-close');
+    const menuOverlay = document.getElementById('menu-overlay');
+    const hamburgerMenu = document.getElementById('hamburger-menu');
+
+    const openMenu = () => {
+      menuOverlay.classList.remove('opacity-0', 'invisible');
+      hamburgerMenu.classList.remove('translate-x-full');
+      menuOverlay.setAttribute('aria-hidden', 'false');
+      document.body.style.overflow = 'hidden';
+      menuToggle.setAttribute('aria-expanded', 'true');
+    };
+
+    const closeMenu = () => {
+      menuOverlay.classList.add('opacity-0', 'invisible');
+      hamburgerMenu.classList.add('translate-x-full');
+      menuOverlay.setAttribute('aria-hidden', 'true');
+      document.body.style.overflow = '';
+      menuToggle.setAttribute('aria-expanded', 'false');
+    };
+
+    // Toggle button click
+    if (menuToggle) {
+      menuToggle.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (menuOverlay.classList.contains('opacity-0')) {
+          openMenu();
+        } else {
+          closeMenu();
+        }
+      });
+    }
+
+    // Close button click
+    if (menuClose) {
+      menuClose.addEventListener('click', closeMenu);
+    }
+
+    // Close on ESC key
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && !menuOverlay.classList.contains('opacity-0')) {
+        closeMenu();
+      }
+    });
+
+    // Close when clicking menu links
+    const menuLinks = hamburgerMenu.querySelectorAll('a');
+    menuLinks.forEach(link => {
+      link.addEventListener('click', closeMenu);
+    });
+
+    // Close when clicking the overlay (but not the menu panel)
+    menuOverlay.addEventListener('click', (e) => {
+      if (e.target === menuOverlay) {
+        closeMenu();
+      }
+    });
+  });
+</script>