# Sidebar Responsivo - Instrucciones de Uso

El sidebar ha sido actualizado para ser completamente responsivo. Aquí tienes las opciones de implementación:

## Opción 1: Usar ResponsiveSidebar (Recomendado para nuevos proyectos)

```jsx
import ResponsiveSidebar from './components/ResponsiveSidebar';

function App() {
  return (
    <ResponsiveSidebar>
      <h1>Contenido de tu aplicación</h1>
      <p>Todo tu contenido va aquí...</p>
    </ResponsiveSidebar>
  );
}
```

**Características:**
- Header fijo en móviles con botón de menú
- Control completo del estado del sidebar
- Diseño consistente en todas las pantallas

## Opción 2: Sidebar Standalone (Para proyectos existentes)

```jsx
import Sidebar from './components/Sidebar';

function App() {
  return (
    <div className="flex h-screen">
      <Sidebar />  {/* ¡Ahora funciona automáticamente en móviles! */}
      <main className="flex-1 p-4">
        Tu contenido aquí...
      </main>
    </div>
  );
}
```

**Características:**
- Botón flotante automático en móviles (solo cuando es necesario)
- Funciona sin configuración adicional
- Mantiene compatibilidad con código existente

## Funcionalidades Responsivas

### Desktop (≥1024px)
- Sidebar fijo en el lado izquierdo
- Botón de colapsar/expandir
- Ancho: 256px (expandido) / 64px (colapsado)

### Móvil (<1024px)

#### Con ResponsiveSidebar:
- Header fijo con botón de menú siempre visible
- Sidebar se desliza desde la izquierda
- Overlay oscuro de fondo

#### Con Sidebar standalone:
- Botón flotante elegante en esquina superior izquierda (solo cuando está cerrado)
- Sidebar se desliza desde la izquierda al hacer clic
- Se oculta automáticamente al navegar

### Auto-cierre en móviles:
- Al hacer clic en el overlay
- Al navegar a otra página  
- Al redimensionar la ventana a desktop
- Al hacer clic en el botón X

## Componentes Exportados

- `Sidebar`: Componente principal del sidebar
- `MobileMenuButton`: Botón para abrir el menú móvil  
- `ResponsiveSidebar`: Wrapper completo con header móvil

## Props del Sidebar

```typescript
interface SidebarProps {
  isMobileOpen?: boolean;     // Estado del menú móvil (opcional)
  onMobileClose?: () => void; // Función para cerrar el menú móvil (opcional)
}
```

**Nota:** Si no pasas estas props, el Sidebar manejará su propio estado automáticamente.

## Migración de Código Existente

### Si ya usas `<Sidebar />`:
✅ **No necesitas cambiar nada!** El sidebar ahora funciona automáticamente en móviles.

### Si quieres el header móvil:
```jsx
// Cambia esto:
<div className="flex">
  <Sidebar />
  <main>Contenido</main>
</div>

// Por esto:
<ResponsiveSidebar>
  Contenido
</ResponsiveSidebar>
```

## Estilos y Diseño

- **Botón flotante**: Diseño sutil que coincide con el tema del sidebar
- **Backdrop blur**: Efecto de cristal esmerilado en el botón
- **Transiciones suaves**: Animaciones consistentes
- **Z-index apropiado**: Sin conflictos con otros elementos

¡El sidebar es ahora completamente responsivo y funciona perfectamente en cualquier dispositivo! 📱💻
