Collapse header nav into a hamburger menu on mobile

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/components/layout/Header.tsx

@@ -1,8 +1,20 @@
-import { BookOpen, Database, Download } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { BookOpen, Database, Download, Menu, X } from 'lucide-react';
 import { Link, useLocation } from 'react-router-dom';
 
 export function Header() {
   const location = useLocation();
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  // Close the mobile menu whenever the route changes
+  useEffect(() => {
+    setMenuOpen(false);
+  }, [location.pathname]);
+
+  const navItemClass = (active: boolean) =>
+    `flex items-center gap-1.5 px-3 py-2 text-sm rounded-lg transition-colors ${
+      active ? 'bg-slate-100 text-slate-900 font-semibold' : 'text-slate-600 hover:bg-slate-50'
+    }`;
 
   return (
     <header className="border-b border-gray-200 bg-white sticky top-0 z-50 shadow-sm">
@@ -17,34 +29,58 @@ export function Header() {
           </div>
         </Link>
 
-        <nav className="flex items-center gap-1 sm:gap-2 shrink-0">
-          <Link
-            to="/"
-            className={`flex items-center gap-1.5 px-2.5 sm:px-3 py-2 text-sm rounded-lg transition-colors ${
-              location.pathname === '/' ? 'bg-slate-100 text-slate-900 font-semibold' : 'text-slate-600 hover:bg-slate-50'
-            }`}
-          >
+        {/* Desktop nav */}
+        <nav className="hidden sm:flex items-center gap-2">
+          <Link to="/" className={navItemClass(location.pathname === '/')}>
             <Database className="w-4 h-4 shrink-0" />
-            <span className="hidden sm:inline">Explorer</span>
+            Explorer
           </Link>
-          <Link
-            to="/docs"
-            className={`flex items-center gap-1.5 px-2.5 sm:px-3 py-2 text-sm rounded-lg transition-colors ${
-              location.pathname === '/docs' ? 'bg-slate-100 text-slate-900 font-semibold' : 'text-slate-600 hover:bg-slate-50'
-            }`}
-          >
+          <Link to="/docs" className={navItemClass(location.pathname === '/docs')}>
             <BookOpen className="w-4 h-4 shrink-0" />
-            <span className="hidden sm:inline">Docs</span>
+            Docs
           </Link>
           <a
             href="/api/protein/download/db"
-            className="flex items-center gap-1.5 px-3 sm:px-4 py-2 text-sm font-medium text-white bg-slate-900 rounded-lg hover:bg-slate-700 transition-colors"
+            className="flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-slate-900 rounded-lg hover:bg-slate-700 transition-colors"
           >
             <Download className="w-4 h-4 shrink-0" />
-            <span className="hidden sm:inline">Download DB</span>
+            Download DB
           </a>
         </nav>
+
+        {/* Mobile menu toggle */}
+        <button
+          type="button"
+          aria-label="Toggle navigation menu"
+          aria-expanded={menuOpen}
+          onClick={() => setMenuOpen((open) => !open)}
+          className="sm:hidden inline-flex items-center justify-center p-2 rounded-lg text-slate-700 hover:bg-slate-100 transition-colors shrink-0"
+        >
+          {menuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+        </button>
       </div>
+
+      {/* Mobile dropdown menu */}
+      {menuOpen && (
+        <nav className="sm:hidden border-t border-gray-200 bg-white px-4 py-3 flex flex-col gap-1">
+          <Link to="/" className={navItemClass(location.pathname === '/')}>
+            <Database className="w-4 h-4 shrink-0" />
+            Explorer
+          </Link>
+          <Link to="/docs" className={navItemClass(location.pathname === '/docs')}>
+            <BookOpen className="w-4 h-4 shrink-0" />
+            Docs
+          </Link>
+          <a
+            href="/api/protein/download/db"
+            onClick={() => setMenuOpen(false)}
+            className="flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-white bg-slate-900 rounded-lg hover:bg-slate-700 transition-colors"
+          >
+            <Download className="w-4 h-4 shrink-0" />
+            Download DB
+          </a>
+        </nav>
+      )}
     </header>
   );
 }