From 58a05c7cdf323efdeda73de5028330d2fc3c7058 Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Sat, 18 Apr 2026 17:09:16 -0400
Subject: [PATCH] Add working mobile hamburger menu

---
 src/components/NavBar.tsx | 53 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index a0cf0e4..3322977 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,3 +1,6 @@
+import { useState } from 'react'
+import { Menu, X } from 'lucide-react'
+
 type NavItem = { href: string; label: string }
 
 const navItems: NavItem[] = [
@@ -9,12 +12,25 @@ const navItems: NavItem[] = [
 ]
 
 export default function NavBar() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const handleClick = (href: string) => {
+    setIsOpen(false)
+    // Smooth scroll to section
+    const element = document.querySelector(href)
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' })
+    }
+  }
+
   return (
     <header className="fixed inset-x-0 top-0 z-50 border-b border-slate-200/70 bg-white/80 backdrop-blur">
       <nav className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3" aria-label="Primary">
         <a href="#introduction" className="font-semibold tracking-wide text-slate-800">
           Peter Myers
         </a>
+
+        {/* Desktop menu */}
         <ul className="hidden items-center gap-6 md:flex">
           {navItems.map((item) => (
             <li key={item.href}>
@@ -27,14 +43,39 @@ export default function NavBar() {
             </li>
           ))}
         </ul>
-        <a
-          href="#introduction"
-          className="md:hidden text-sm font-medium text-slate-700 hover:text-slate-900"
-          aria-label="Jump to introduction"
+
+        {/* Mobile menu button */}
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="md:hidden p-2 text-slate-700 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-emerald-500/60 rounded"
+          aria-label={isOpen ? 'Close menu' : 'Open menu'}
+          aria-expanded={isOpen}
         >
-          Menu
-        </a>
+          {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+        </button>
       </nav>
+
+      {/* Mobile menu overlay */}
+      {isOpen && (
+        <div className="md:hidden border-t border-slate-200/70 bg-white/95 backdrop-blur">
+          <ul className="px-4 py-3 space-y-2">
+            {navItems.map((item) => (
+              <li key={item.href}>
+                <a
+                  href={item.href}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    handleClick(item.href)
+                  }}
+                  className="block py-2 text-base font-medium text-slate-700 hover:text-slate-900 hover:bg-emerald-50/50 rounded px-2"
+                >
+                  {item.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
     </header>
   )
 }