51 lines
2 KiB
TypeScript
51 lines
2 KiB
TypeScript
|
import { useLocation, Link } from 'react-router-dom';
|
||
|
|
import { Home, Search, Layers, MessageSquare, User } from 'lucide-react';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
const navItems = [
|
||
|
|
{ id: 'home', label: 'Home', icon: Home, path: '/dashboard' },
|
||
|
|
{ id: 'search', label: 'Search', icon: Search, path: '/search' },
|
||
|
|
{ id: 'library', label: 'Library', icon: Layers, path: '/library' },
|
||
|
|
{ id: 'chat', label: 'Chat', icon: MessageSquare, path: '/chat' },
|
||
|
|
{ id: 'profile', label: 'Profile', icon: User, path: '/settings' },
|
||
|
|
];
|
||
|
|
|
||
|
|
export function MobileBottomNav() {
|
||
|
|
const location = useLocation();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav className="fixed bottom-0 left-0 right-0 z-40 bg-background/95 backdrop-blur-lg border-t border-border/50 lg:hidden">
|
||
|
|
<div className="flex items-center justify-around px-2 py-1">
|
||
|
|
{navItems.map((item) => {
|
||
|
|
const isActive = location.pathname.startsWith(item.path);
|
||
|
|
const Icon = item.icon;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
key={item.id}
|
||
|
|
to={item.path}
|
||
|
|
className={cn(
|
||
|
|
'relative flex flex-col items-center justify-center gap-0.5 py-2 px-3 min-w-12 min-h-12 rounded-xl transition-colors',
|
||
|
|
isActive
|
||
|
|
? 'text-primary'
|
||
|
|
: 'text-muted-foreground active:text-foreground',
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Icon className={cn('h-5 w-5', isActive && 'fill-primary/20')} />
|
||
|
|
{/* text-[10px] exception: Tailwind has no scale below text-xs (12px); 10px is standard for mobile bottom nav labels */}
|
||
|
|
<span className="text-[10px] font-medium leading-none">
|
||
|
|
{item.label}
|
||
|
|
</span>
|
||
|
|
{isActive && (
|
||
|
|
<span className="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-0.5 rounded-full bg-primary" />
|
||
|
|
)}
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
{/* Safe area for iPhone home indicator */}
|
||
|
|
<div className="h-[env(safe-area-inset-bottom)]" />
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
}
|