230421/VdcScoreLive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adicao de sistema de login para admins e menu de definições

Browse Source
This commit is contained in:
230421
2026-05-12 16:57:41 +01:00
parent 732e7276b7
commit f5d22bf83e
12 changed files with 1443 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/layout/Sidebar.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import { NavLink } from 'react-router-dom';
import { NavLink, useNavigate } from 'react-router-dom';
import { useAuth } from '../../lib/AuthContext';
import {
LayoutDashboard,
Trophy,
@@ -13,6 +14,15 @@ import {
} 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' },
@@ -20,47 +30,60 @@ const Sidebar = () => {
{ icon: Trophy, label: 'Classificação', path: '/standings' },
{ icon: Users, label: 'Clubes', path: '/clubs' },
{ icon: User, label: 'Jogadores', path: '/players' },
{ icon: BarChart, label: 'Artilheiros', path: '/scorers' },
{ 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">
<div className="p-6 flex items-center gap-3 border-b border-border">
<div className="bg-brand-primary p-2 rounded-lg">
<Zap className="text-bg-base fill-bg-base" size={24} />
<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>
<span className="font-display text-2xl tracking-wider">⚽ ADM</span>
</div>
<nav className="flex-1 py-6 px-3 space-y-1">
<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-3 py-2.5 rounded-lg transition-all duration-200 group
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 border-l-4 border-brand-primary rounded-l-none'
: 'text-text-secondary hover:bg-bg-overlay hover:text-text-primary'}
? 'bg-brand-primary/10 text-brand-primary'
: 'text-text-secondary hover:bg-bg-elevated hover:text-text-primary'}
`}
>
<item.icon size={20} className="shrink-0" />
<span className="font-medium text-sm">{item.label}</span>
{({ 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-4 border-t border-border space-y-1">
<div className="p-3 border-t border-border space-y-1 bg-bg-surface">
<NavLink
to="/settings"
className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-secondary hover:bg-bg-overlay hover:text-text-primary transition-all"
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={20} />
<span className="font-medium text-sm">Definições</span>
<Settings size={18} />
<span>Definições</span>
</NavLink>
<button className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-brand-danger hover:bg-brand-danger/10 transition-all">
<LogOut size={20} />
<span className="font-medium text-sm">Sair</span>
<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>