feat: add mobile hamburger menu with slide-down panel

Desktop nav unchanged. On mobile: hamburger animates to X on open,
panel slides down with nav links + search, backdrop dims the page,
menu closes on route change or backdrop tap, body scroll locked while open.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/nav.tsx

@@ -1,12 +1,7 @@
 'use client'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
-
-const WC_TROPHY = (
-  // eslint-disable-next-line @next/next/no-img-element
-  <img src="/favicon.svg" style={{ height: '36px', width: 'auto' }} alt="" />
-)
 
 const NAV_LINKS = [
   { href: '/', label: 'Home' },
@@ -19,44 +14,115 @@ export function Nav() {
   const pathname = usePathname()
   const router = useRouter()
   const [q, setQ] = useState('')
+  const [open, setOpen] = useState(false)
+
+  // Close menu on route change
+  useEffect(() => { setOpen(false) }, [pathname])
+
+  // Lock body scroll when menu open
+  useEffect(() => {
+    document.body.style.overflow = open ? 'hidden' : ''
+    return () => { document.body.style.overflow = '' }
+  }, [open])
 
   const handleSearch = (e: React.FormEvent) => {
     e.preventDefault()
-    if (q.trim()) router.push(`/search?q=${encodeURIComponent(q.trim())}`)
+    if (q.trim()) {
+      router.push(`/search?q=${encodeURIComponent(q.trim())}`)
+      setOpen(false)
+      setQ('')
+    }
   }
 
-  return (
+  const isActive = (href: string) =>
-    <nav className="fixed top-0 left-0 right-0 z-50 h-[60px] flex items-center px-5 gap-0"
+    href === '/' ? pathname === '/' : pathname.startsWith(href)
-      style={{ background: 'rgba(4,13,8,0.97)', backdropFilter: 'blur(18px)', borderBottom: '1px solid rgba(34,197,94,0.18)' }}>
-      <Link href="/" className="flex items-center gap-2.5 mr-5 flex-shrink-0 cursor-pointer select-none">
-        {WC_TROPHY}
-        <span className="font-['Bebas_Neue'] text-lg tracking-[3px] text-[#22c55e] whitespace-nowrap">WORLD CUP</span>
-      </Link>
 
-      <div className="flex gap-0.5 flex-1 min-w-0">
+  return (
-        {NAV_LINKS.map(({ href, label }) => {
+    <>
-          const active = href === '/' ? pathname === '/' : pathname.startsWith(href)
+      <nav
-          return (
+        className="fixed top-0 left-0 right-0 z-50 h-[60px] flex items-center px-5"
+        style={{ background: 'rgba(4,13,8,0.97)', backdropFilter: 'blur(18px)', borderBottom: '1px solid rgba(34,197,94,0.18)' }}
+      >
+        {/* Logo */}
+        <Link href="/" className="flex items-center gap-2.5 flex-shrink-0 cursor-pointer select-none">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src="/favicon.svg" style={{ height: '36px', width: 'auto' }} alt="" />
+          <span className="font-['Bebas_Neue'] text-lg tracking-[3px] text-[#22c55e] whitespace-nowrap">WORLD CUP</span>
+        </Link>
+
+        {/* Desktop links */}
+        <div className="hidden md:flex gap-0.5 flex-1 min-w-0 ml-5">
+          {NAV_LINKS.map(({ href, label }) => (
             <Link key={href} href={href}
-              className={`px-3.5 py-1.5 rounded-lg text-[13px] font-medium whitespace-nowrap flex-shrink-0 transition-colors
+              className={`px-3.5 py-1.5 rounded-lg text-[13px] font-medium whitespace-nowrap transition-colors
-                ${active ? 'bg-[rgba(34,197,94,0.12)] text-[#22c55e]' : 'text-[#4a7a55] hover:text-[#6abf7a]'}`}>
+                ${isActive(href) ? 'bg-[rgba(34,197,94,0.12)] text-[#22c55e]' : 'text-[#4a7a55] hover:text-[#6abf7a]'}`}>
               {label}
             </Link>
-          )
+          ))}
-        })}
+        </div>
-      </div>
 
-      <form onSubmit={handleSearch} className="relative flex-shrink-0 ml-2">
+        {/* Desktop search */}
-        <input
+        <form onSubmit={handleSearch} className="relative flex-shrink-0 ml-auto hidden md:block">
-          type="text" value={q} onChange={e => setQ(e.target.value)}
+          <input
-          placeholder="Search…"
+            type="text" value={q} onChange={e => setQ(e.target.value)}
-          className="w-44 pl-8 pr-3.5 py-1.5 rounded-[20px] text-[13px] text-[#dff5e8] outline-none"
+            placeholder="Search…"
-          style={{ background: 'rgba(34,197,94,0.06)', border: '1px solid rgba(34,197,94,0.18)' }}
+            className="w-44 pl-8 pr-3.5 py-1.5 rounded-[20px] text-[13px] text-[#dff5e8] outline-none"
+            style={{ background: 'rgba(34,197,94,0.06)', border: '1px solid rgba(34,197,94,0.18)' }}
+          />
+          <svg className="absolute left-2.5 top-1/2 -translate-y-1/2 opacity-30 pointer-events-none" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#dff5e8" strokeWidth="2.5">
+            <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+        </form>
+
+        {/* Hamburger */}
+        <button
+          onClick={() => setOpen(o => !o)}
+          className="ml-auto md:hidden flex flex-col justify-center items-center w-9 h-9 gap-[5px] rounded-lg transition-colors"
+          style={{ background: open ? 'rgba(34,197,94,0.1)' : 'transparent' }}
+          aria-label="Menu"
+        >
+          <span className={`block w-5 h-[2px] bg-[#22c55e] rounded-full transition-all origin-center ${open ? 'rotate-45 translate-y-[7px]' : ''}`} />
+          <span className={`block w-5 h-[2px] bg-[#22c55e] rounded-full transition-all ${open ? 'opacity-0' : ''}`} />
+          <span className={`block w-5 h-[2px] bg-[#22c55e] rounded-full transition-all origin-center ${open ? '-rotate-45 -translate-y-[7px]' : ''}`} />
+        </button>
+      </nav>
+
+      {/* Mobile menu overlay */}
+      {open && (
+        <div
+          className="fixed inset-0 z-40 md:hidden"
+          style={{ background: 'rgba(4,13,8,0.6)', backdropFilter: 'blur(4px)', top: '60px' }}
+          onClick={() => setOpen(false)}
         />
-        <svg className="absolute left-2.5 top-1/2 -translate-y-1/2 opacity-30 pointer-events-none" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#dff5e8" strokeWidth="2.5">
+      )}
-          <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+
-        </svg>
+      {/* Mobile menu panel */}
-      </form>
+      <div
-    </nav>
+        className={`fixed left-0 right-0 z-40 md:hidden transition-all duration-200 ${open ? 'top-[60px] opacity-100' : 'top-[48px] opacity-0 pointer-events-none'}`}
+        style={{ background: 'rgba(4,13,8,0.98)', borderBottom: '1px solid rgba(34,197,94,0.18)' }}
+      >
+        <div className="px-5 py-4 flex flex-col gap-1">
+          {NAV_LINKS.map(({ href, label }) => (
+            <Link key={href} href={href}
+              className={`px-4 py-3 rounded-xl text-[15px] font-medium transition-colors
+                ${isActive(href) ? 'bg-[rgba(34,197,94,0.12)] text-[#22c55e]' : 'text-[#6abf7a] hover:bg-[rgba(34,197,94,0.06)]'}`}>
+              {label}
+            </Link>
+          ))}
+
+          <form onSubmit={handleSearch} className="relative mt-3">
+            <input
+              type="text" value={q} onChange={e => setQ(e.target.value)}
+              placeholder="Search players, teams, tournaments…"
+              className="w-full pl-9 pr-4 py-3 rounded-xl text-[14px] text-[#dff5e8] outline-none"
+              style={{ background: 'rgba(34,197,94,0.06)', border: '1px solid rgba(34,197,94,0.18)' }}
+            />
+            <svg className="absolute left-3 top-1/2 -translate-y-1/2 opacity-30 pointer-events-none" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#dff5e8" strokeWidth="2.5">
+              <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>
+          </form>
+        </div>
+      </div>
+    </>
   )
 }