38 lines
996 B
TypeScript
38 lines
996 B
TypeScript
'use client'
|
|
|
|
import { usePathname } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import { navItems } from './navItems'
|
|
import { cn } from '@/utils/cn'
|
|
|
|
export function MobileNavbar() {
|
|
const pathname = usePathname()
|
|
|
|
const isActive = (href: string) => {
|
|
if (href === '/') {
|
|
return pathname === href
|
|
}
|
|
return pathname?.startsWith(href)
|
|
}
|
|
|
|
return (
|
|
<nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-bg border-t border-border z-50">
|
|
<div className="flex justify-between items-center p-4 max-w-90 mx-auto">
|
|
{navItems
|
|
.filter((item) => !item.isExternal)
|
|
.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
'transition-colors',
|
|
isActive(item.href) ? 'text-accent' : 'text-fg-dim hover:text-fg',
|
|
)}
|
|
>
|
|
{item.icon}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|