From e9af3a9c275629463bbb64287dde51731e1f56a9 Mon Sep 17 00:00:00 2001
From: Scott Scoble <scott@scoble.me>
Date: Wed, 29 Apr 2026 16:47:30 -0700
Subject: [PATCH] fix: add working mobile hamburger menu with slide-down panel
 and X animation

---
 src/components/Nav.astro | 95 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)

diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 0ea6d0e..d915838 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -28,6 +28,15 @@ const navLinks = [
       <span></span>
     </button>
   </div>
+
+  <div class="nav-mobile-menu" aria-hidden="true">
+    <div class="nav-mobile-links">
+      {navLinks.map(link => (
+        <a href={link.href} class="nav-mobile-link">{link.label}</a>
+      ))}
+      <a href="/speaking#book" class="nav-mobile-cta">Book Scott</a>
+    </div>
+  </div>
 </nav>
 
 <style>
@@ -134,6 +143,59 @@ const navLinks = [
     transition: all 0.2s ease;
   }
   
+  .nav-mobile-menu {
+    display: none;
+    background: rgba(250, 248, 245, 0.98);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--color-border-light);
+    padding: 1rem 2rem 2rem;
+  }
+  
+  .nav-mobile-menu.open {
+    display: block;
+  }
+  
+  .nav-mobile-links {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    align-items: center;
+  }
+  
+  .nav-mobile-link {
+    color: var(--color-brown);
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 1.125rem;
+    padding: 0.75rem 0;
+    width: 100%;
+    text-align: center;
+    border-bottom: 1px solid var(--color-border-light);
+    transition: color 0.2s ease;
+  }
+  
+  .nav-mobile-link:hover {
+    color: var(--color-brown-dark);
+  }
+  
+  .nav-mobile-cta {
+    display: inline-block;
+    background: var(--color-amber);
+    color: white;
+    padding: 0.75rem 2rem;
+    border-radius: 6px;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 1rem;
+    margin-top: 0.75rem;
+    text-align: center;
+    transition: all 0.2s ease;
+  }
+  
+  .nav-mobile-cta:hover {
+    background: var(--color-amber-light);
+  }
+
   @media (max-width: 768px) {
     .nav-links {
       display: none;
@@ -146,5 +208,38 @@ const navLinks = [
     .nav-menu-toggle {
       display: flex;
     }
+    
+    .nav-menu-toggle.open span:nth-child(1) {
+      transform: rotate(45deg) translate(4px, 4px);
+    }
+    
+    .nav-menu-toggle.open span:nth-child(2) {
+      opacity: 0;
+    }
+    
+    .nav-menu-toggle.open span:nth-child(3) {
+      transform: rotate(-45deg) translate(4px, -4px);
+    }
   }
 </style>
+
+<script>
+  const toggle = document.querySelector('.nav-menu-toggle');
+  const mobileMenu = document.querySelector('.nav-mobile-menu');
+  if (toggle && mobileMenu) {
+    toggle.addEventListener('click', () => {
+      const isOpen = mobileMenu.classList.toggle('open');
+      toggle.classList.toggle('open', isOpen);
+      toggle.setAttribute('aria-expanded', String(isOpen));
+      mobileMenu.setAttribute('aria-hidden', String(!isOpen));
+    });
+    mobileMenu.querySelectorAll('a').forEach(link => {
+      link.addEventListener('click', () => {
+        mobileMenu.classList.remove('open');
+        toggle.classList.remove('open');
+        toggle.setAttribute('aria-expanded', 'false');
+        mobileMenu.setAttribute('aria-hidden', 'true');
+      });
+    });
+  }
+</script>