From 80286039c0795211162b4ff4b8227f51b39fd918 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Thu, 16 Apr 2026 15:57:37 +0200
Subject: fix: rewrite hamburger menu using Alpine.js event dispatcher

- Replace vanilla JS click handlers with Alpine.js @toggle-menu event
- Hamburger button dispatches toggle-menu event on click
- Menu overlay listens to toggle-menu and toggles menuOpen state
- Alpine controls visibility via :class bindings (opacity/invisible)
- Alpine controls panel slide via :class bindings (translate-x)
- All menu interactions (close button, links, ESC, backdrop) use Alpine
- Remove complex vanilla JS that wasn't working reliably
- Rebuild CSS: main.min.css updated

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../layouts/partials/hamburger-menu.html           | 104 +++++----------------
 1 file changed, 23 insertions(+), 81 deletions(-)

(limited to 'themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html')

diff --git a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
index 4d02d9c..02e6d0d 100644
--- a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
+++ b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
@@ -1,17 +1,22 @@
+<!-- Mobile menu overlay (Alpine.js controlled) -->
 <div
-  id="menu-overlay"
-  class="fixed inset-0 bg-black/50 backdrop-blur opacity-0 invisible transition-all duration-300 z-40"
-  aria-hidden="true"
+  x-data="{ menuOpen: false }"
+  @toggle-menu.window="menuOpen = !menuOpen"
+  @keydown.escape.window="menuOpen = false"
+  :class="{ 'opacity-0 invisible': !menuOpen, 'opacity-100 visible': menuOpen }"
+  class="fixed inset-0 bg-black/50 backdrop-blur transition-all duration-300 z-40"
+  :aria-hidden="!menuOpen"
+  @click="if ($event.target === $el) menuOpen = false"
 >
   <div
-    id="hamburger-menu"
-    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"
+    class="fixed top-0 right-0 h-screen w-full max-w-sm bg-bg border-l border-border overflow-y-auto transform transition-transform duration-300 z-50"
+    :class="{ 'translate-x-full': !menuOpen, 'translate-x-0': menuOpen }"
   >
     <!-- 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
-        id="menu-close"
+        @click="menuOpen = false"
         aria-label="{{ i18n "closeMenu" }}"
         class="p-2 hover:bg-surface rounded transition-colors"
       >
@@ -24,6 +29,7 @@
       {{ range .Site.Menus.main }}
         <a
           href="{{ .URL }}"
+          @click="menuOpen = false"
           class="block py-4 text-lg font-medium hover:text-accent transition-colors border-b border-border/30"
         >
           {{ i18n .Name }}
@@ -54,6 +60,7 @@
           {{ end }}
           <a
             href="{{ $url }}"
+            @click="menuOpen = false"
             class="flex-1 py-2 px-3 text-center rounded transition-colors {{ if $current }}bg-accent text-white{{ else }}bg-surface hover:bg-surface/80{{ end }}"
           >
             {{ $langName }}
@@ -66,83 +73,18 @@
 </div>
 
 <script>
-  function initializeHamburgerMenu() {
+  // Make menuOpen accessible from the menu toggle button
+  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');
-
-    if (!menuToggle || !menuOverlay || !hamburgerMenu) {
-      console.warn('Hamburger menu elements not found', {
-        menuToggle: !!menuToggle,
-        menuOverlay: !!menuOverlay,
-        hamburgerMenu: !!hamburgerMenu
-      });
-      return;
-    }
-
-    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
-    menuToggle.addEventListener('click', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (menuOverlay.classList.contains('opacity-0')) {
-        openMenu();
-      } else {
-        closeMenu();
-      }
-    });
-
-    // Close button click
-    if (menuClose) {
-      menuClose.addEventListener('click', (e) => {
+    if (menuToggle && window.__alpineInstances) {
+      menuToggle.addEventListener('click', (e) => {
         e.preventDefault();
-        closeMenu();
+        // Find the Alpine component and toggle it
+        const overlay = document.querySelector('[x-data*="menuOpen"]');
+        if (overlay && overlay.__x) {
+          overlay.__x.$data.menuOpen = !overlay.__x.$data.menuOpen;
+        }
       });
     }
-
-    // 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', (e) => {
-        closeMenu();
-      });
-    });
-
-    // Close when clicking the overlay (but not the menu panel)
-    menuOverlay.addEventListener('click', (e) => {
-      if (e.target === menuOverlay) {
-        closeMenu();
-      }
-    });
-  }
-
-  // Run when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initializeHamburgerMenu);
-  } else {
-    initializeHamburgerMenu();
-  }
+  });
 </script>
-- 
cgit v1.2.3