From 063b5edbaab5de5c758bb4179b97b818af6b6466 Mon Sep 17 00:00:00 2001
From: becarta <github.devotee752@passmail.net>
Date: Thu, 19 Jun 2025 00:31:59 +0200
Subject: [PATCH] Refactor mobile menu implementation in Header component:
 update button ID, enhance toggle functionality with detailed logging, and
 streamline event listeners for improved user experience.

---
 src/components/Header.astro | 60 +++++++++++++++++++++++--------------
 1 file changed, 37 insertions(+), 23 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 77d499f..0295f97 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -94,7 +94,7 @@ import '../styles/main.css';
         </a>
 
         <!-- Mobile menu button -->
-        <button class="mobile-menu-btn" onclick="toggleMobileMenu()">
+        <button class="mobile-menu-btn" id="mobile-menu-btn">
           <svg class="mobile-menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
           </svg>
@@ -130,27 +130,48 @@ import '../styles/main.css';
 
 <script>
   function toggleMobileMenu() {
+    console.log('toggleMobileMenu function called');
     const menu = document.getElementById('mobile-menu');
+    console.log('Menu element:', menu);
     if (menu) {
+      const wasHidden = menu.classList.contains('mobile-menu-hidden');
       menu.classList.toggle('mobile-menu-hidden');
-      console.log('Mobile menu toggled:', !menu.classList.contains('mobile-menu-hidden'));
+      const isNowHidden = menu.classList.contains('mobile-menu-hidden');
+      console.log('Menu was hidden:', wasHidden, 'Menu is now hidden:', isNowHidden);
+      console.log('Menu classes:', menu.className);
+    } else {
+      console.log('Menu element not found!');
     }
   }
 
-  // Close mobile menu when clicking outside
-  document.addEventListener('click', function(event) {
-    const mobileMenu = document.getElementById('mobile-menu');
-    const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
-    
-    if (mobileMenu && mobileMenuBtn && 
-        !mobileMenu.contains(event.target as Node) && 
-        !mobileMenuBtn.contains(event.target as Node)) {
-      mobileMenu.classList.add('mobile-menu-hidden');
-    }
-  });
-
-  // Close mobile menu when clicking on a mobile nav link
+  // Initialize mobile menu functionality
   document.addEventListener('DOMContentLoaded', function() {
+    console.log('DOM loaded, setting up mobile menu');
+    
+    // Add click event to mobile menu button
+    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
+    console.log('Mobile menu button:', mobileMenuBtn);
+    if (mobileMenuBtn) {
+      mobileMenuBtn.addEventListener('click', function(e) {
+        console.log('Mobile menu button clicked!');
+        e.preventDefault();
+        toggleMobileMenu();
+      });
+    }
+
+    // Close mobile menu when clicking outside
+    document.addEventListener('click', function(event) {
+      const mobileMenu = document.getElementById('mobile-menu');
+      const mobileMenuBtn = document.getElementById('mobile-menu-btn');
+      
+      if (mobileMenu && mobileMenuBtn && 
+          !mobileMenu.contains(event.target as Node) && 
+          !mobileMenuBtn.contains(event.target as Node)) {
+        mobileMenu.classList.add('mobile-menu-hidden');
+      }
+    });
+
+    // Close mobile menu when clicking on a mobile nav link
     const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
     mobileNavLinks.forEach(link => {
       link.addEventListener('click', function() {
@@ -160,13 +181,10 @@ import '../styles/main.css';
         }
       });
     });
-  });
 
-  // Add active state to current page
-  document.addEventListener('DOMContentLoaded', function() {
+    // Add active state to current page
     const currentPath = window.location.pathname;
     const navLinks = document.querySelectorAll('.nav-link');
-    const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
     
     // Desktop navigation active state
     navLinks.forEach(link => {
@@ -561,10 +579,6 @@ import '../styles/main.css';
     display: block;
   }
 
-  .mobile-menu-hidden {
-    display: none !important;
-  }
-
   @media (min-width: 1024px) {
     .mobile-menu {
       display: none !important;