40 lines
1.3 KiB
JavaScript
40 lines
1.3 KiB
JavaScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { Chrome as Home, Target, BookOpen, ShoppingBag } from 'lucide-react';
|
|
|
|
export default function MobileNav() {
|
|
const pathname = usePathname();
|
|
|
|
const navItems = [
|
|
{ href: '/dashboard', icon: Home, label: 'Главная' },
|
|
{ href: '/missions', icon: Target, label: 'Миссии' },
|
|
{ href: '/journal', icon: BookOpen, label: 'Журнал' },
|
|
{ href: '/store', icon: ShoppingBag, label: 'Магазин' },
|
|
];
|
|
|
|
return (
|
|
<nav className="fixed bottom-0 left-0 right-0 bg-slate-900 border-t border-slate-800 md:hidden z-40">
|
|
<div className="flex items-center justify-around px-2 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-4 py-2 rounded-lg transition-colors ${
|
|
isActive
|
|
? 'text-blue-400 bg-blue-500/10'
|
|
: 'text-slate-400 hover:text-slate-200'
|
|
}`}
|
|
>
|
|
<item.icon className="w-5 h-5" />
|
|
<span className="text-xs font-medium">{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
} |