From 73a5596857a1307773a40f1ef418fc9da351b83c Mon Sep 17 00:00:00 2001
From: achmad <anakinskywalk1@gmail.com>
Date: Fri, 29 May 2026 03:24:18 +0700
Subject: [PATCH] feat: mobile hamburger menu with full-screen overlay for
 categories

---
 components/layout/NavbarClient.tsx | 148 ++++++++++++++++++++++-------
 1 file changed, 112 insertions(+), 36 deletions(-)

diff --git a/components/layout/NavbarClient.tsx b/components/layout/NavbarClient.tsx
index a3bb6bb..cee1bb1 100644
--- a/components/layout/NavbarClient.tsx
+++ b/components/layout/NavbarClient.tsx
@@ -1,8 +1,9 @@
 'use client'
 
+import { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { Search } from 'lucide-react'
+import { Search, Menu, X } from 'lucide-react'
 import type { Category } from '@/lib/types'
 
 interface Props {
@@ -11,50 +12,125 @@ interface Props {
 
 export default function NavbarClient({ categories }: Props) {
   const pathname = usePathname()
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  useEffect(() => {
+    setMenuOpen(false)
+  }, [pathname])
+
+  useEffect(() => {
+    if (menuOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => { document.body.style.overflow = '' }
+  }, [menuOpen])
 
   function openSearch() {
     window.dispatchEvent(new CustomEvent('kotobane:open-search'))
   }
 
   return (
-    <nav className="bg-bg-elevated border-b border-border sticky top-0 z-40">
-      <div className="max-w-[1200px] mx-auto px-6 h-14 flex items-center gap-6">
-        <Link href="/" className="text-lg font-black text-accent tracking-[3px] shrink-0">
-          言羽
-        </Link>
+    <>
+      <nav className="bg-bg-elevated border-b border-border sticky top-0 z-40">
+        <div className="max-w-[1200px] mx-auto px-4 h-14 flex items-center">
+          {/* Mobile hamburger */}
+          <button
+            onClick={() => setMenuOpen(true)}
+            className="sm:hidden mr-3 text-text-muted hover:text-text-secondary transition-colors"
+            aria-label="Open menu"
+          >
+            <Menu size={20} />
+          </button>
 
-        <div className="w-px h-4 bg-border shrink-0" />
+          {/* Logo — center on mobile, left on desktop */}
+          <Link
+            href="/"
+            className="text-lg font-black text-accent tracking-[3px] shrink-0 sm:mr-6 sm:ml-0 mx-auto sm:mx-0"
+          >
+            言羽
+          </Link>
 
-        <div className="flex items-center gap-1 overflow-x-auto">
-          {categories.map((cat) => {
-            const isActive = pathname.startsWith(`/${cat.slug}`)
-            return (
-              <Link
-                key={cat.slug}
-                href={`/${cat.slug}`}
-                className={`text-xs font-medium px-3 py-1 rounded-sm whitespace-nowrap transition-colors ${
-                  isActive
-                    ? 'text-accent'
-                    : 'text-text-muted hover:text-text-secondary'
-                }`}
-              >
-                {cat.name}
-              </Link>
-            )
-          })}
+          {/* Desktop nav links */}
+          <div className="hidden sm:flex items-center gap-1 flex-1 overflow-x-auto">
+            <div className="w-px h-4 bg-border shrink-0 mr-4" />
+            {categories.map((cat) => {
+              const isActive = pathname.startsWith(`/${cat.slug}`)
+              return (
+                <Link
+                  key={cat.slug}
+                  href={`/${cat.slug}`}
+                  className={`text-xs font-medium px-3 py-1 rounded-sm whitespace-nowrap transition-colors outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg-elevated ${
+                    isActive
+                      ? 'text-accent'
+                      : 'text-text-muted hover:text-text-secondary'
+                  }`}
+                >
+                  {cat.name}
+                </Link>
+              )
+            })}
+          </div>
+
+          {/* Search */}
+          <button
+            onClick={openSearch}
+            className="ml-auto sm:ml-0 flex items-center gap-2 text-text-muted hover:text-text-secondary transition-colors shrink-0"
+            aria-label="Open search"
+          >
+            <Search size={16} />
+            <kbd className="hidden sm:inline-flex bg-bg-card border border-border rounded px-1.5 py-0.5 text-[10px] font-mono">
+              ⌘K
+            </kbd>
+          </button>
         </div>
+      </nav>
 
-        <button
-          onClick={openSearch}
-          className="ml-auto flex items-center gap-2 text-text-muted hover:text-text-secondary transition-colors shrink-0"
-          aria-label="Open search"
-        >
-          <Search size={16} />
-          <kbd className="hidden sm:inline-flex bg-bg-card border border-border rounded px-1.5 py-0.5 text-[10px] font-mono">
-            ⌘K
-          </kbd>
-        </button>
-      </div>
-    </nav>
+      {/* Mobile overlay */}
+      {menuOpen && (
+        <div className="fixed inset-0 z-50 sm:hidden">
+          <div className="absolute inset-0 bg-black/60" onClick={() => setMenuOpen(false)} />
+          <div className="relative w-full h-full bg-bg-elevated flex flex-col">
+            {/* Overlay header */}
+            <div className="flex items-center justify-between px-4 h-14 border-b border-border">
+              <span className="text-lg font-black text-accent tracking-[3px]">言羽</span>
+              <button
+                onClick={() => setMenuOpen(false)}
+                className="text-text-muted hover:text-text-secondary transition-colors"
+                aria-label="Close menu"
+              >
+                <X size={22} />
+              </button>
+            </div>
+
+            {/* Category list */}
+            <div className="flex-1 overflow-y-auto py-4">
+              {categories.map((cat) => {
+                const isActive = pathname.startsWith(`/${cat.slug}`)
+                return (
+                  <Link
+                    key={cat.slug}
+                    href={`/${cat.slug}`}
+                    className={`block px-6 py-3.5 text-sm font-medium transition-colors ${
+                      isActive
+                        ? 'text-accent bg-bg-card border-l-2 border-accent'
+                        : 'text-text-muted hover:text-text-secondary hover:bg-bg-card'
+                    }`}
+                  >
+                    {cat.name}
+                    {cat.description && (
+                      <span className="block text-[11px] text-text-disabled font-normal mt-0.5">
+                        {cat.description}
+                      </span>
+                    )}
+                  </Link>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
   )
 }