42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import { Link, useRouterState } from '@tanstack/react-router'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const NAV_ITEMS = [
|
|
{ to: '/', label: 'Home', icon: 'home', matchPrefix: '/', exact: true },
|
|
{ to: '/toeic', label: 'Luyện đề', icon: 'assignment', matchPrefix: '/toeic', exact: false },
|
|
{ to: '/writing', label: 'Writing', icon: 'edit_note', matchPrefix: '/writing', exact: false },
|
|
{ to: '/vocab', label: 'Từ vựng', icon: 'menu_book', matchPrefix: '/vocab', exact: false },
|
|
]
|
|
|
|
function isActive(pathname: string, prefix: string, exact: boolean) {
|
|
return exact ? pathname === prefix : pathname.startsWith(prefix)
|
|
}
|
|
|
|
export function MobileNav() {
|
|
const { location } = useRouterState()
|
|
const pathname = location.pathname
|
|
|
|
return (
|
|
<nav className="fixed bottom-0 inset-x-0 lg:hidden bg-white border-t border-slate-200 z-50 flex safe-area-inset-bottom">
|
|
{NAV_ITEMS.map((item) => {
|
|
const active = isActive(pathname, item.matchPrefix, item.exact)
|
|
return (
|
|
<Link
|
|
key={item.to}
|
|
to={item.to}
|
|
className={cn(
|
|
'flex-1 flex flex-col items-center justify-center gap-0.5 py-2 min-h-[56px] text-[11px] font-medium transition-colors',
|
|
active ? 'text-blue-600' : 'text-slate-400',
|
|
)}
|
|
>
|
|
<span className="material-symbols-outlined" style={{ fontSize: 22 }}>
|
|
{item.icon}
|
|
</span>
|
|
{item.label}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
)
|
|
}
|