fix: hamburger menu click handler and horizontal scroll issues

- Improve hamburger menu JS with better error handling and console warnings
- Add preventDefault() to button click handlers for reliability
- Handle document ready state check (in case script runs before DOMContentLoaded)
- Add overflow-x-hidden to html and body to prevent horizontal scrolling on mobile
- Rebuild CSS: main.min.css updated

Co-Authored-By: Claude Haiku 4.5 <redacted>

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index 883d4852b2ab4f9213331fd4ea8b9699c39380c2..f7d42a98ead9d821c3627aeec099eeb7b8d34394 100644 (file)
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -70,8 +70,12 @@ html.theme-light {
 }
 
 @layer base {
+  html {
+    @apply overflow-x-hidden;
+  }
+
   body {
-    @apply bg-bg text-text font-body;
+    @apply bg-bg text-text font-body overflow-x-hidden;
   }
 
   h1,

diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index 82ac77c1663c31b2dbccab6a1ca3c1146bb96c6b..36c66d10b5eafba334d459060bdb4b2dc537e991 100644 (file)
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -554,7 +554,12 @@ video {
   display: none;
 }
 
+html {
+  overflow-x: hidden;
+}
+
 body {
+  overflow-x: hidden;
   background-color: var(--bg);
   font-family: IBM Plex Sans, sans-serif;
   color: var(--text);

diff --git a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
index 4260456dd45736cf91490344ea47ddafa6065340..4d02d9c853c222830f23004e225973bd49f0238c 100644 (file)
--- a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
+++ b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
@@ -66,12 +66,21 @@
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', () => {
+  function initializeHamburgerMenu() {
     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');
@@ -89,20 +98,22 @@
     };
 
     // Toggle button click
-    if (menuToggle) {
-      menuToggle.addEventListener('click', (e) => {
-        e.stopPropagation();
-        if (menuOverlay.classList.contains('opacity-0')) {
-          openMenu();
-        } else {
-          closeMenu();
-        }
-      });
-    }
+    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', closeMenu);
+      menuClose.addEventListener('click', (e) => {
+        e.preventDefault();
+        closeMenu();
+      });
     }
 
     // Close on ESC key
@@ -115,7 +126,9 @@
     // Close when clicking menu links
     const menuLinks = hamburgerMenu.querySelectorAll('a');
     menuLinks.forEach(link => {
-      link.addEventListener('click', closeMenu);
+      link.addEventListener('click', (e) => {
+        closeMenu();
+      });
     });
 
     // Close when clicking the overlay (but not the menu panel)
@@ -124,5 +137,12 @@
         closeMenu();
       }
     });
-  });
+  }
+
+  // Run when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeHamburgerMenu);
+  } else {
+    initializeHamburgerMenu();
+  }
 </script>