71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { motion } from "framer-motion"
|
|
|
|
const navItems = [
|
|
{ href: "/", label: "Home", icon: "◈" },
|
|
{ href: "/map", label: "Map", icon: "◉" },
|
|
]
|
|
|
|
export default function Nav() {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<>
|
|
{/* Desktop top nav */}
|
|
<nav className="hidden md:flex items-center justify-between px-8 py-5 border-b border-white/5 sticky top-0 z-50 bg-[#0d0d0d]/80 backdrop-blur-xl">
|
|
<Link href="/" className="text-2xl font-black tracking-tighter text-[#f5f5f5] 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-white/60"
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Mobile bottom nav */}
|
|
<nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 border-t border-white/5 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-white/40"
|
|
}`}
|
|
>
|
|
{item.icon}
|
|
</motion.div>
|
|
<span
|
|
className={`text-[10px] font-medium tracking-wider uppercase transition-colors ${
|
|
isActive ? "text-[#f59e0b]" : "text-white/30"
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</nav>
|
|
</>
|
|
)
|
|
}
|