VPS 4 Builder
90 lines
4.3 KiB
TypeScript
90 lines
4.3 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { useAuth } from '@/lib/auth';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { useState } from 'react';
|
|
|
|
const userMenu = [
|
|
{ icon: '📊', label: 'Painel', href: '/dashboard' },
|
|
{ icon: '🎁', label: 'Benefícios', href: '/benefits' },
|
|
{ icon: '⭐', label: 'Favoritos', href: '/dashboard?tab=favorites' },
|
|
{ icon: '📜', label: 'Histórico', href: '/dashboard?tab=history' },
|
|
{ icon: '👤', label: 'Perfil', href: '/profile' },
|
|
];
|
|
|
|
const adminMenu = [
|
|
{ icon: '📊', label: 'Dashboard', href: '/admin' },
|
|
{ icon: '👥', label: 'Usuários', href: '/admin?tab=users' },
|
|
{ icon: '🏢', label: 'Parceiros', href: '/admin?tab=partners' },
|
|
{ icon: '🎁', label: 'Benefícios', href: '/admin?tab=benefits' },
|
|
{ icon: '🔌', label: 'Plugins', href: '/admin?tab=plugins' },
|
|
{ icon: '📋', label: 'Logs', href: '/admin?tab=logs' },
|
|
{ icon: '⚙️', label: 'Configurações', href: '/settings' },
|
|
];
|
|
|
|
const partnerMenu = [
|
|
{ icon: '📊', label: 'Dashboard', href: '/partner' },
|
|
{ icon: '🎁', label: 'Benefícios', href: '/partner?tab=benefits' },
|
|
{ icon: '👥', label: 'Membros', href: '/partner?tab=members' },
|
|
{ icon: '📈', label: 'Relatórios', href: '/partner?tab=reports' },
|
|
{ icon: '⚙️', label: 'Configurações', href: '/settings' },
|
|
];
|
|
|
|
export default function Sidebar() {
|
|
const { user, logout, isAdmin, isPartner } = useAuth();
|
|
const pathname = usePathname();
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
|
|
const menu = isAdmin ? adminMenu : isPartner ? partnerMenu : userMenu;
|
|
|
|
return (
|
|
<aside className={`fixed left-0 top-0 h-full bg-dark-900/80 backdrop-blur-xl border-r border-dark-800 z-40 transition-all duration-300 ${collapsed ? 'w-20' : 'w-64'}`}>
|
|
{/* Logo */}
|
|
<div className="flex items-center justify-between px-6 py-5 border-b border-dark-800">
|
|
{!collapsed && <Link href="/" className="text-xl font-bold gradient-text">Clube67</Link>}
|
|
<button onClick={() => setCollapsed(!collapsed)} className="p-2 rounded-lg hover:bg-dark-800 transition-colors text-dark-400 hover:text-white">
|
|
{collapsed ? '→' : '←'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Nav */}
|
|
<nav className="mt-4 px-3 space-y-1">
|
|
{menu.map(item => {
|
|
const active = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href.split('?')[0]));
|
|
return (
|
|
<Link key={item.href} href={item.href}
|
|
className={`flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all ${active ? 'bg-brand-600/15 text-brand-400 border border-brand-500/20' : 'text-dark-400 hover:text-white hover:bg-dark-800'
|
|
}`}>
|
|
<span className="text-lg">{item.icon}</span>
|
|
{!collapsed && <span>{item.label}</span>}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* User */}
|
|
<div className="absolute bottom-0 left-0 right-0 p-4 border-t border-dark-800">
|
|
<div className={`flex items-center gap-3 ${collapsed ? 'justify-center' : ''}`}>
|
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-purple-600 flex items-center justify-center text-sm font-bold shrink-0">
|
|
{user?.name?.charAt(0) || '?'}
|
|
</div>
|
|
{!collapsed && (
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium truncate">{user?.name}</p>
|
|
<p className="text-xs text-dark-500 truncate">{user?.email}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{!collapsed && (
|
|
<button onClick={logout}
|
|
className="w-full mt-3 py-2 text-sm text-dark-400 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-all">
|
|
Sair da conta
|
|
</button>
|
|
)}
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|