120 lines
4.2 KiB
TypeScript
120 lines
4.2 KiB
TypeScript
import { Link, useLocation } from '@tanstack/react-router';
|
|
import { Home, Gamepad2, FileText, Settings, Database, Tag, Download, Upload } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { Button } from '@/components/ui/button';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { Badge } from '@/components/ui/badge';
|
|
|
|
interface SidebarProps {
|
|
isOpen?: boolean;
|
|
onClose?: () => void;
|
|
}
|
|
|
|
const navigation = [
|
|
{ name: 'Dashboard', href: '/', icon: Home, count: null },
|
|
{ name: 'Juegos', href: '/games', icon: Gamepad2, count: null },
|
|
{
|
|
name: 'Plataformas',
|
|
href: '/platforms',
|
|
icon: Database,
|
|
count: null,
|
|
},
|
|
{
|
|
name: 'Etiquetas',
|
|
href: '/tags',
|
|
icon: Tag,
|
|
count: null,
|
|
},
|
|
{ name: 'Importar ROMs', href: '/import', icon: Download, count: null },
|
|
{ name: 'Exportar', href: '/export', icon: Upload, count: null },
|
|
{ name: 'Configuración', href: '/settings', icon: Settings, count: null },
|
|
];
|
|
|
|
export function Sidebar({ isOpen, onClose }: SidebarProps) {
|
|
const location = useLocation();
|
|
|
|
return (
|
|
<>
|
|
{/* Overlay para móviles */}
|
|
{isOpen && <div className="fixed inset-0 z-40 bg-black/50 md:hidden" onClick={onClose} />}
|
|
|
|
{/* Sidebar */}
|
|
<div
|
|
className={cn(
|
|
'fixed left-0 top-0 z-50 h-full w-64 transform border-r bg-background transition-transform duration-300 ease-in-out md:relative md:translate-x-0',
|
|
isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
|
|
)}
|
|
>
|
|
<div className="flex h-full flex-col">
|
|
{/* Header del sidebar */}
|
|
<div className="flex h-14 items-center border-b px-4">
|
|
<div className="flex items-center space-x-2">
|
|
<Gamepad2 className="h-6 w-6" />
|
|
<span className="font-bold">Quasar</span>
|
|
</div>
|
|
<Button variant="ghost" size="sm" className="ml-auto md:hidden" onClick={onClose}>
|
|
✕
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Contenido del sidebar */}
|
|
<ScrollArea className="flex-1">
|
|
<nav className="p-4 space-y-1">
|
|
{navigation.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = location.pathname === item.href;
|
|
|
|
return (
|
|
<Link
|
|
key={item.name}
|
|
to={item.href}
|
|
onClick={onClose}
|
|
className={cn(
|
|
'flex items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
|
|
isActive ? 'bg-accent text-accent-foreground' : 'text-muted-foreground'
|
|
)}
|
|
>
|
|
<div className="flex items-center space-x-3">
|
|
<Icon className="h-4 w-4" />
|
|
<span>{item.name}</span>
|
|
</div>
|
|
{item.count !== null && (
|
|
<Badge variant="secondary" className="text-xs">
|
|
{item.count}
|
|
</Badge>
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* Sección adicional con información */}
|
|
<div className="mt-8 p-4 border-t">
|
|
<h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
|
|
Información
|
|
</h3>
|
|
<div className="space-y-2 text-xs text-muted-foreground">
|
|
<div className="flex justify-between">
|
|
<span>Versión</span>
|
|
<span>1.0.0</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Última actualización</span>
|
|
<span>2024-01-15</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
{/* Footer del sidebar */}
|
|
<div className="flex h-14 items-center border-t px-4">
|
|
<div className="flex items-center space-x-2 text-xs text-muted-foreground">
|
|
<span>© 2024 Quasar</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|