Enhance Header component: implement mobile menu functionality, improve active state handling for navigation links, and add responsive styles for better mobile experience.

src/components/Header.astro

@@ -136,11 +136,25 @@ import '../styles/main.css';
     }
   }
 
+  // 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');
+    }
+  });
+
   // Add active state to current page
   document.addEventListener('DOMContentLoaded', function() {
     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 => {
       const href = link.getAttribute('href');
       if (href && (href === currentPath || (currentPath !== '/home' && href !== '/home' && currentPath.startsWith(href)))) {
@@ -151,6 +165,14 @@ import '../styles/main.css';
         }
       }
     });
+
+    // Mobile navigation active state
+    mobileNavLinks.forEach(link => {
+      const href = link.getAttribute('href');
+      if (href && (href === currentPath || (currentPath !== '/home' && href !== '/home' && currentPath.startsWith(href)))) {
+        link.classList.add('mobile-nav-link-active');
+      }
+    });
   });
 </script>
 
@@ -237,6 +259,7 @@ import '../styles/main.css';
     align-items: center;
     justify-content: space-between;
     padding: 1rem 0;
+    gap: 1rem;
   }
 
   /* Logo */
@@ -246,6 +269,7 @@ import '../styles/main.css';
     gap: 0.75rem;
     text-decoration: none;
     color: inherit;
+    flex-shrink: 0;
   }
 
   .logo-container {
@@ -262,6 +286,13 @@ import '../styles/main.css';
     transition: all 0.3s ease;
   }
 
+  @media (max-width: 768px) {
+    .logo-flag {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+  }
+
   .header-logo:hover .logo-flag {
     box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
   }
@@ -286,12 +317,25 @@ import '../styles/main.css';
     justify-content: center;
   }
 
+  @media (max-width: 768px) {
+    .logo-symbol {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+
   .logo-symbol span {
     color: white;
     font-weight: bold;
     font-size: 0.875rem;
   }
 
+  @media (max-width: 768px) {
+    .logo-symbol span {
+      font-size: 0.75rem;
+    }
+  }
+
   .logo-accent {
     position: absolute;
     top: -4px;
@@ -303,6 +347,15 @@ import '../styles/main.css';
     animation: bounce 2s infinite;
   }
 
+  @media (max-width: 768px) {
+    .logo-accent {
+      width: 0.75rem;
+      height: 0.75rem;
+      top: -2px;
+      right: -2px;
+    }
+  }
+
   .logo-text {
     display: flex;
     flex-direction: column;
@@ -318,6 +371,12 @@ import '../styles/main.css';
     -webkit-text-fill-color: transparent;
   }
 
+  @media (max-width: 768px) {
+    .logo-title {
+      font-size: 1.25rem;
+    }
+  }
+
   .logo-subtitle {
     font-size: 0.875rem;
     color: #6b7280;
@@ -325,6 +384,12 @@ import '../styles/main.css';
     margin-top: -0.25rem;
   }
 
+  @media (max-width: 768px) {
+    .logo-subtitle {
+      font-size: 0.75rem;
+    }
+  }
+
   /* Desktop Navigation */
   .header-desktop-nav {
     display: none;
@@ -379,6 +444,13 @@ import '../styles/main.css';
     display: flex;
     align-items: center;
     gap: 0.75rem;
+    flex-shrink: 0;
+  }
+
+  @media (max-width: 768px) {
+    .header-cta {
+      gap: 0.5rem;
+    }
   }
 
   .btn {
@@ -390,6 +462,14 @@ import '../styles/main.css';
     text-decoration: none;
     transition: all 0.2s ease;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    white-space: nowrap;
+  }
+
+  @media (max-width: 768px) {
+    .btn {
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+    }
   }
 
   .btn:hover {
@@ -402,6 +482,14 @@ import '../styles/main.css';
     margin-right: 0.5rem;
   }
 
+  @media (max-width: 768px) {
+    .btn-icon {
+      width: 0.875rem;
+      height: 0.875rem;
+      margin-right: 0.25rem;
+    }
+  }
+
   .btn-donate {
     background: linear-gradient(45deg, #ef4444, #dc2626);
     color: white;
@@ -422,25 +510,26 @@ import '../styles/main.css';
 
   /* Mobile Menu Button */
   .mobile-menu-btn {
-    display: block;
+    display: none;
     padding: 0.5rem;
     border-radius: 8px;
     background: none;
     border: none;
     cursor: pointer;
     transition: background-color 0.2s ease;
+    flex-shrink: 0;
+  }
+
+  @media (max-width: 1023px) {
+    .mobile-menu-btn {
+      display: block;
+    }
   }
 
   .mobile-menu-btn:hover {
     background: rgba(0, 0, 0, 0.05);
   }
 
-  @media (min-width: 1024px) {
-    .mobile-menu-btn {
-      display: none;
-    }
-  }
-
   .mobile-menu-icon {
     width: 1.5rem;
     height: 1.5rem;
@@ -448,7 +537,7 @@ import '../styles/main.css';
 
   /* Mobile Menu */
   .mobile-menu {
-    display: none;
+    display: block;
     background: white;
     border-top: 1px solid rgba(229, 229, 229, 0.5);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -488,6 +577,41 @@ import '../styles/main.css';
     background: rgba(22, 163, 74, 0.1);
   }
 
+  .mobile-nav-link-active {
+    color: #16a34a;
+    background: rgba(22, 163, 74, 0.1);
+    font-weight: 600;
+  }
+
+  /* Mobile-specific adjustments */
+  @media (max-width: 768px) {
+    .header-content {
+      padding: 0 1rem;
+    }
+    
+    .header-nav {
+      padding: 0.75rem 0;
+    }
+    
+    /* Hide desktop buttons on mobile */
+    .btn {
+      display: none;
+    }
+    
+    /* Show mobile menu button */
+    .mobile-menu-btn {
+      display: block;
+    }
+  }
+
+  @media (min-width: 769px) and (max-width: 1023px) {
+    /* On tablets, show buttons but make them smaller */
+    .btn {
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+    }
+  }
+
   /* Animations */
   @keyframes bounce {
     0%, 20%, 53%, 80%, 100% {
@@ -514,5 +638,4 @@ import '../styles/main.css';
       padding-top: 80px;
     }
   }
-</style>
 </style>