122 lines
4.4 KiB
TypeScript
122 lines
4.4 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { motion } from "framer-motion"
|
|
import { useTheme } from "@/app/components/ThemeProvider"
|
|
|
|
const navItems = [
|
|
{ href: "/", label: "Home", icon: "◈" },
|
|
{ href: "/map", label: "Map", icon: "◉" },
|
|
]
|
|
|
|
function SunIcon() {
|
|
return (
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="12" r="5"/>
|
|
<line x1="12" y1="1" x2="12" y2="3"/>
|
|
<line x1="12" y1="21" x2="12" y2="23"/>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
|
|
<line x1="1" y1="12" x2="3" y2="12"/>
|
|
<line x1="21" y1="12" x2="23" y2="12"/>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
function MoonIcon() {
|
|
return (
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export default function Nav() {
|
|
const pathname = usePathname()
|
|
const { theme, toggle } = useTheme()
|
|
|
|
return (
|
|
<>
|
|
{/* Desktop top nav */}
|
|
<nav className="hidden md:flex items-center justify-between px-8 py-5 border-b border-black/[0.06] dark:border-white/[0.05] sticky top-0 z-50 bg-[#fafafa]/80 dark:bg-[#0d0d0d]/80 backdrop-blur-xl">
|
|
<Link href="/" className="text-2xl font-black tracking-tighter text-[#111] dark:text-[#f5f5f5] hover:text-[#f59e0b] dark:hover:text-[#f59e0b] transition-colors">
|
|
food.
|
|
</Link>
|
|
<div className="flex items-center gap-8">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`text-sm font-medium transition-colors hover:text-[#f59e0b] ${
|
|
pathname === item.href
|
|
? "text-[#f59e0b]"
|
|
: "text-black/50 dark:text-white/60"
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
<button
|
|
onClick={toggle}
|
|
aria-label="Toggle theme"
|
|
className="text-black/40 dark:text-white/40 hover:text-[#f59e0b] dark:hover:text-[#f59e0b] transition-colors p-1"
|
|
>
|
|
{theme === "dark" ? <SunIcon /> : <MoonIcon />}
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Mobile bottom nav */}
|
|
<nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 border-t border-black/[0.06] dark:border-white/[0.05] bg-[#fafafa]/90 dark:bg-[#0d0d0d]/90 backdrop-blur-xl">
|
|
<div className="flex items-center justify-around py-3">
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="flex flex-col items-center gap-1 px-6 py-1"
|
|
>
|
|
<motion.div
|
|
whileTap={{ scale: 0.85 }}
|
|
className={`text-xl transition-colors ${
|
|
isActive ? "text-[#f59e0b]" : "text-black/30 dark:text-white/40"
|
|
}`}
|
|
>
|
|
{item.icon}
|
|
</motion.div>
|
|
<span
|
|
className={`text-[10px] font-medium tracking-wider uppercase transition-colors ${
|
|
isActive ? "text-[#f59e0b]" : "text-black/25 dark:text-white/30"
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
{/* Theme toggle in mobile nav */}
|
|
<button
|
|
onClick={toggle}
|
|
aria-label="Toggle theme"
|
|
className="flex flex-col items-center gap-1 px-6 py-1"
|
|
>
|
|
<motion.div
|
|
whileTap={{ scale: 0.85 }}
|
|
className="text-xl text-black/30 dark:text-white/40 hover:text-[#f59e0b] transition-colors"
|
|
>
|
|
{theme === "dark" ? <SunIcon /> : <MoonIcon />}
|
|
</motion.div>
|
|
<span className="text-[10px] font-medium tracking-wider uppercase text-black/25 dark:text-white/30">
|
|
{theme === "dark" ? "Light" : "Dark"}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</>
|
|
)
|
|
}
|