added responsive hamburger menu

Author: rmfisher26

src/components/Header.astro

@@ -2,47 +2,77 @@
 const base = import.meta.env.BASE_URL.replace(/\/$/, '');
 const currentPath = Astro.url.pathname;
 ---
-<header>
+
+<header id="site-header">
   <a href={base} class="site-logo">
     <span class="logo-fish">🐟</span>
     GuppyFisher
   </a>
-  <nav>
-    <a href={base} class={currentPath === base || currentPath === base.slice(0,-1) ? 'active' : ''}>Posts</a>
-    <a href={`${base}/series`} class={currentPath.startsWith(`${base}/series`) ? 'active' : ''}>Deep Dives</a>
+
+  <nav id="main-nav" aria-label="Main navigation">
+    <a href={base} class={currentPath === base || currentPath === `${base}/` ? 'active' : ''}>Posts</a>
     <a href={`${base}/series`} class={currentPath.startsWith(`${base}/series`) ? 'active' : ''}>Series</a>
     <a href={`${base}/about`} class={currentPath === `${base}/about` ? 'active' : ''}>About</a>
   </nav>
+
   <div class="header-right">
     <span class="tag-badge">Learning in Public</span>
+    <button
+      id="menu-toggle"
+      class="menu-toggle"
+      aria-label="Open menu"
+      aria-expanded="false"
+      aria-controls="main-nav"
+    >
+      <svg class="icon-menu" width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
+        <line x1="3" y1="6"  x2="19" y2="6"  stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        <line x1="3" y1="11" x2="19" y2="11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        <line x1="3" y1="16" x2="19" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+      </svg>
+      <svg class="icon-close" width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
+        <line x1="4" y1="4"  x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        <line x1="18" y1="4" x2="4"  y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+      </svg>
+    </button>
   </div>
 </header>
 
 <style>
-  header {
+  /* ── BASE ── */
+  #site-header {
+    position: sticky;
+    top: 0;
+    z-index: 200;
+    background: var(--paper);
     border-bottom: 2px solid var(--ink);
     padding: 0 2rem;
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     align-items: center;
-    min-height: 80px;
+    min-height: 72px;
+    transition: box-shadow 0.25s ease;
   }
 
+  #site-header.scrolled {
+    box-shadow: 0 4px 24px rgba(13, 15, 20, 0.07);
+  }
+
+  /* ── LOGO ── */
   .site-logo {
     font-family: 'Syne', sans-serif;
     font-weight: 800;
-    font-size: 1.5rem;
+    font-size: 1.4rem;
     letter-spacing: -0.03em;
     text-decoration: none;
     color: var(--ink);
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.45rem;
   }
 
   .logo-fish {
     display: inline-block;
-    font-size: 1.8rem;
+    font-size: 1.6rem;
     animation: swim 3s ease-in-out infinite;
   }
 
@@ -51,11 +81,12 @@ const currentPath = Astro.url.pathname;
     50%       { transform: translateY(-4px) rotate(5deg); }
   }
 
+  /* ── DESKTOP NAV ── */
   nav {
     display: flex;
     gap: 2rem;
     font-family: 'Syne', sans-serif;
-    font-size: 0.85rem;
+    font-size: 0.82rem;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
@@ -65,13 +96,15 @@ const currentPath = Astro.url.pathname;
     color: var(--ink);
     text-decoration: none;
     position: relative;
-    padding-bottom: 2px;
+    padding-bottom: 3px;
   }
 
   nav a::after {
     content: '';
     position: absolute;
-    bottom: 0; left: 0; right: 100%;
+    bottom: 0;
+    left: 0;
+    right: 100%;
     height: 2px;
     background: var(--accent);
     transition: right 0.25s ease;
@@ -80,26 +113,136 @@ const currentPath = Astro.url.pathname;
   nav a:hover::after,
   nav a.active::after { right: 0; }
 
+  nav a.active { color: var(--ink); }
+
+  /* ── RIGHT SLOT ── */
   .header-right {
     display: flex;
     justify-content: flex-end;
+    align-items: center;
+    gap: 1rem;
   }
 
   .tag-badge {
     background: var(--ink);
     color: var(--paper);
     font-family: 'Syne', sans-serif;
-    font-size: 0.7rem;
+    font-size: 0.68rem;
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     padding: 0.3rem 0.7rem;
     border-radius: 2px;
   }
 
-  @media (max-width: 700px) {
-    header { grid-template-columns: 1fr auto; }
-    .header-right { display: none; }
-    nav { gap: 1rem; }
+  /* ── HAMBURGER ── */
+  .menu-toggle {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: none;
+    border: 1.5px solid var(--border);
+    border-radius: 4px;
+    cursor: pointer;
+    color: var(--ink);
+    transition: border-color 0.2s, background 0.2s;
+    flex-shrink: 0;
+  }
+
+  .menu-toggle:hover {
+    border-color: var(--ink);
+    background: rgba(13, 15, 20, 0.04);
+  }
+
+  .icon-close { display: none; }
+
+  .menu-toggle[aria-expanded="true"] .icon-menu  { display: none; }
+  .menu-toggle[aria-expanded="true"] .icon-close { display: block; }
+
+  /* ── MOBILE ── */
+  @media (max-width: 680px) {
+    #site-header {
+      grid-template-columns: 1fr auto;
+      padding: 0 1.25rem;
+      min-height: 64px;
+    }
+
+    nav {
+      display: none;
+      position: absolute;
+      top: calc(100% + 2px); /* sits just below the border */
+      left: 0;
+      right: 0;
+      flex-direction: column;
+      gap: 0;
+      background: var(--paper);
+      border-bottom: 2px solid var(--ink);
+      box-shadow: 0 8px 24px rgba(13, 15, 20, 0.08);
+    }
+
+    nav.open {
+      display: flex;
+      animation: slideDown 0.2s ease both;
+    }
+
+    @keyframes slideDown {
+      from { opacity: 0; transform: translateY(-8px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+
+    nav a {
+      padding: 1rem 1.5rem;
+      border-top: 1px solid var(--border);
+      font-size: 0.95rem;
+      letter-spacing: 0.06em;
+    }
+
+    nav a::after { display: none; }
+
+    nav a.active {
+      color: var(--accent);
+      background: rgba(0, 200, 150, 0.05);
+    }
+
+    .tag-badge  { display: none; }
+    .menu-toggle { display: flex; }
   }
 </style>
+
+<script>
+  const header = document.getElementById('site-header');
+  const toggle = document.getElementById('menu-toggle');
+  const nav    = document.getElementById('main-nav');
+
+  // Sticky shadow on scroll
+  window.addEventListener('scroll', () => {
+    header?.classList.toggle('scrolled', window.scrollY > 8);
+  }, { passive: true });
+
+  // Toggle menu
+  toggle?.addEventListener('click', () => {
+    const isOpen = nav?.classList.toggle('open') ?? false;
+    toggle.setAttribute('aria-expanded', String(isOpen));
+    toggle.setAttribute('aria-label', isOpen ? 'Close menu' : 'Open menu');
+  });
+
+  // Close on link click
+  nav?.querySelectorAll('a').forEach(link => {
+    link.addEventListener('click', () => {
+      nav.classList.remove('open');
+      toggle?.setAttribute('aria-expanded', 'false');
+      toggle?.setAttribute('aria-label', 'Open menu');
+    });
+  });
+
+  // Close on outside click
+  document.addEventListener('click', (e) => {
+    if (!header?.contains(e.target as Node)) {
+      nav?.classList.remove('open');
+      toggle?.setAttribute('aria-expanded', 'false');
+      toggle?.setAttribute('aria-label', 'Open menu');
+    }
+  });
+</script>