ShootTracker Deploy
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { NavLink } from 'react-router-dom'
|
|
import { Home, Crosshair, Shield, TrendingUp, User } from 'lucide-react'
|
|
|
|
const navItems = [
|
|
{ to: '/', icon: Home, label: 'Accueil' },
|
|
{ to: '/session/new', icon: Crosshair, label: 'Séance' },
|
|
{ to: '/arsenal', icon: Shield, label: 'Arsenal' },
|
|
{ to: '/progress', icon: TrendingUp, label: 'Progression'},
|
|
{ to: '/profile', icon: User, label: 'Profil' },
|
|
]
|
|
|
|
export default function BottomNav() {
|
|
return (
|
|
<nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-surface border-t border-border safe-bottom z-50">
|
|
<div className="flex items-stretch h-16">
|
|
{navItems.map(({ to, icon: Icon, label }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
end={to === '/'}
|
|
className={({ isActive }) =>
|
|
`flex-1 flex flex-col items-center justify-center gap-0.5 text-[10px] font-medium transition-colors
|
|
${isActive ? 'text-accent' : 'text-muted hover:text-text-muted'}`
|
|
}
|
|
>
|
|
{({ isActive }) => (
|
|
<>
|
|
<Icon size={20} className={isActive ? 'text-accent' : ''} />
|
|
<span>{label}</span>
|
|
</>
|
|
)}
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|