From 65713e53501c898b111118b00c351e4324513499 Mon Sep 17 00:00:00 2001
From: becarta <github.devotee752@passmail.net>
Date: Thu, 19 Jun 2025 00:29:41 +0200
Subject: [PATCH] Improve mobile menu functionality in Header component: add
 toggle behavior, close menu on link click, and adjust CSS for better
 visibility.

---
 src/components/Header.astro | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index b943791..77d499f 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -104,7 +104,7 @@ import '../styles/main.css';
   </div>
 
   <!-- Mobile Navigation -->
-  <div id="mobile-menu" class="mobile-menu">
+  <div id="mobile-menu" class="mobile-menu mobile-menu-hidden">
     <div class="mobile-menu-content">
       <a href="/home" class="mobile-nav-link">
         🏠 Home
@@ -133,6 +133,7 @@ import '../styles/main.css';
     const menu = document.getElementById('mobile-menu');
     if (menu) {
       menu.classList.toggle('mobile-menu-hidden');
+      console.log('Mobile menu toggled:', !menu.classList.contains('mobile-menu-hidden'));
     }
   }
 
@@ -148,6 +149,19 @@ import '../styles/main.css';
     }
   });
 
+  // Close mobile menu when clicking on a mobile nav link
+  document.addEventListener('DOMContentLoaded', function() {
+    const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
+    mobileNavLinks.forEach(link => {
+      link.addEventListener('click', function() {
+        const menu = document.getElementById('mobile-menu');
+        if (menu) {
+          menu.classList.add('mobile-menu-hidden');
+        }
+      });
+    });
+  });
+
   // Add active state to current page
   document.addEventListener('DOMContentLoaded', function() {
     const currentPath = window.location.pathname;
@@ -537,12 +551,16 @@ import '../styles/main.css';
 
   /* Mobile Menu */
   .mobile-menu {
-    display: block;
+    display: none;
     background: white;
     border-top: 1px solid rgba(229, 229, 229, 0.5);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }
 
+  .mobile-menu:not(.mobile-menu-hidden) {
+    display: block;
+  }
+
   .mobile-menu-hidden {
     display: none !important;
   }