Refactor code structure for improved readability and maintainability

frontend/src/components/layout/Sidebar.tsx

@@ -1,9 +1,119 @@
-import React from 'react';
+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();
 
-export default function Sidebar(): JSX.Element {
   return (
-    <aside style={{ padding: 12 }}>
-      <div>Sidebar (placeholder)</div>
-    </aside>
+    <>
+      {/* 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>
+    </>
   );
 }