feat: mobile hamburger menu with full-screen overlay for categories
This commit is contained in:
achmad
@@ -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>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user