@kirill.komarov
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { Link, useLocation } from 'react-router';
|
||
import { LayoutDashboard, ShoppingBag, Star, Users, FileText } from 'lucide-react';
|
||
|
||
const navItems = [
|
||
{ path: '/admin', label: 'Dashboard', icon: LayoutDashboard },
|
||
{ path: '/admin/orders', label: 'Заказы', icon: ShoppingBag },
|
||
{ path: '/admin/reviews', label: 'Отзывы', icon: Star },
|
||
{ path: '/admin/users', label: 'Пользователи', icon: Users },
|
||
{ path: '/admin/info', label: 'Информация', icon: FileText }
|
||
];
|
||
|
||
export function AdminSidebar() {
|
||
const location = useLocation();
|
||
|
||
return (
|
||
<aside className="w-64 bg-card border-r border-border min-h-screen p-6">
|
||
<Link to="/admin" className="block mb-8">
|
||
<h2 className="text-xl text-foreground">Админ-панель</h2>
|
||
</Link>
|
||
|
||
<nav className="space-y-2">
|
||
{navItems.map(item => {
|
||
const Icon = item.icon;
|
||
const isActive = location.pathname === item.path;
|
||
|
||
return (
|
||
<Link
|
||
key={item.path}
|
||
to={item.path}
|
||
className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 ${
|
||
isActive
|
||
? 'bg-primary text-primary-foreground shadow-md'
|
||
: 'text-muted-foreground hover:bg-muted hover:text-foreground'
|
||
}`}
|
||
>
|
||
<Icon className="w-5 h-5" />
|
||
<span className="text-sm">{item.label}</span>
|
||
</Link>
|
||
);
|
||
})}
|
||
</nav>
|
||
</aside>
|
||
);
|
||
}
|