94 lines
3.2 KiB
TypeScript
94 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { NavLink, useNavigate } from 'react-router-dom';
|
|
import { useAuth } from '../../lib/AuthContext';
|
|
import {
|
|
LayoutDashboard,
|
|
Trophy,
|
|
Users,
|
|
User,
|
|
Calendar,
|
|
BarChart,
|
|
Settings,
|
|
LogOut,
|
|
Zap
|
|
} from 'lucide-react';
|
|
|
|
const Sidebar = () => {
|
|
const { logout } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
navigate('/login');
|
|
};
|
|
|
|
const menuItems = [
|
|
{ icon: LayoutDashboard, label: 'Dashboard', path: '/' },
|
|
{ icon: Zap, label: 'Jogos Live', path: '/games/live' },
|
|
{ icon: Calendar, label: 'Jornadas', path: '/games' },
|
|
{ icon: Trophy, label: 'Classificação', path: '/standings' },
|
|
{ icon: Users, label: 'Clubes', path: '/clubs' },
|
|
{ icon: User, label: 'Jogadores', path: '/players' },
|
|
{ icon: BarChart, label: 'Melhores Marcadores', path: '/scorers' },
|
|
];
|
|
|
|
return (
|
|
<aside className="w-60 bg-bg-surface border-r border-border flex flex-col h-screen sticky top-0 z-20">
|
|
<div className="p-5 flex items-center gap-3 border-b border-border h-20">
|
|
<div className="bg-brand-primary p-2 rounded-xl shadow-lg shadow-brand-primary/20 shrink-0">
|
|
<Zap className="text-bg-base fill-bg-base" size={22} />
|
|
</div>
|
|
<div className="flex flex-col leading-tight overflow-hidden">
|
|
<span className="font-display text-[10px] text-brand-primary tracking-[0.2em] uppercase">Admin</span>
|
|
<span className="font-display text-xl tracking-wide truncate">VdcScore</span>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="flex-1 py-6 px-3 space-y-1 overflow-y-auto">
|
|
{menuItems.map((item) => (
|
|
<NavLink
|
|
key={item.path}
|
|
to={item.path}
|
|
className={({ isActive }) => `
|
|
flex items-center gap-3 px-4 py-2.5 rounded-xl transition-all duration-200 group
|
|
${isActive
|
|
? 'bg-brand-primary/10 text-brand-primary'
|
|
: 'text-text-secondary hover:bg-bg-elevated hover:text-text-primary'}
|
|
`}
|
|
>
|
|
{({ isActive }) => (
|
|
<>
|
|
<item.icon size={18} className={`shrink-0 ${isActive ? 'animate-pulse' : ''}`} />
|
|
<span className="font-medium text-sm tracking-wide">{item.label}</span>
|
|
</>
|
|
)}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="p-3 border-t border-border space-y-1 bg-bg-surface">
|
|
<NavLink
|
|
to="/settings"
|
|
className={({ isActive }) => `
|
|
flex items-center gap-3 px-4 py-2.5 rounded-xl transition-all text-sm font-medium
|
|
${isActive ? 'bg-bg-elevated text-brand-primary' : 'text-text-secondary hover:bg-bg-elevated hover:text-text-primary'}
|
|
`}
|
|
>
|
|
<Settings size={18} />
|
|
<span>Definições</span>
|
|
</NavLink>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-brand-danger hover:bg-brand-danger/10 transition-all text-sm font-medium text-left"
|
|
>
|
|
<LogOut size={18} />
|
|
<span>Sair</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|