@klu_dev/ui-klu-green 1.2.3 → 1.2.5

package/README.md

@@ -654,4 +654,85 @@ export default function NavigationDashboard() {
 | `id` | `string` | Identificador único de la pestaña. |
 | `label` | `string` | Texto descriptivo de la opción que verá el usuario. |
 | `icon` | `ReactNode` | Elemento gráfico/ícono extraído del objeto `Icons`. |
-| `content` | `ReactNode` | (Opcional) Componente o vista que se renderizará automáticamente al activar la pestaña. |
+| `content` | `ReactNode` | (Opcional) Componente o vista que se renderizará automáticamente al activar la pestaña. |
+
+
+## Uso de MobileMenuDrawer
+
+Componente presentacional ("tonto") diseñado para desplegar la barra de navegación en vistas responsivas móviles. Al cambiar de pestaña, delega el control de la acción a la aplicación contenedora para poder mutar layouts completos de forma dinámica mediante un Mapeo de Componentes.
+
+
+
+```tsx
+import { useState } from 'react'
+import { MobileMenuDrawer, Button, Icons } from '@klu_dev/ui-klu-green'
+import { MoreHorizontal } from 'lucide-react'
+
+// 1. Importa tus componentes/vistas completos del proyecto
+import { MiVistaInicio } from './views/MiVistaInicio'
+import { MiVistaTarjeta } from './views/MiVistaTarjeta'
+import { MiVistaMovimientos } from './views/MiVistaMovimientos'
+
+export function AppMobileLayout() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [activeTab, setActiveTab] = useState('inicio')
+
+  // Opciones compartidas con el menú
+  const opcionesMenu = [
+    { id: 'inicio', label: 'Inicio', icon: Icons.HOME },
+    { id: 'tarjeta', label: 'Mi Tarjeta', icon: Icons.MYCARD },
+    { id: 'movimientos', label: 'Movimientos', icon: Icons.MOVEMENTS },
+  ]
+
+  // 2. Diccionario de mapeo: Asocia cada ID string con su respectiva vista
+  const rendersDeVistas: Record<string, React.ReactNode> = {
+    inicio: <MiVistaInicio />,
+    tarjeta: <MiVistaTarjeta />,
+    movimientos: <MiVistaMovimientos />,
+  }
+
+  return (
+    <div className="uiklu-w-full uiklu-min-h-screen uiklu-bg-gray-50 uiklu-flex uiklu-flex-col">
+      <header className="uiklu-bg-white uiklu-p-4 uiklu-flex uiklu-justify-between uiklu-items-center uiklu-border-b">
+        <span>Mi Banca Web</span>
+        
+        {/* Botón para abrir el drawer */}
+        <Button
+          variant="iconCircle"
+          size="iconOnly"
+          onClick={() => setIsMenuOpen(true)}
+          icon={<MoreHorizontal style={{ width: '20px', height: '20px', color: '#FFF' }} />}
+        />
+      </header>
+
+      {/* 3. Contenedor Dinámico: Se monta la vista completa en base al ID seleccionado */}
+      <main className="uiklu-p-4 uiklu-flex-1">
+        {rendersDeVistas[activeTab] || <MiVistaInicio />}
+      </main>
+
+      {/* Render del Drawer Mobile */}
+      <MobileMenuDrawer
+        isOpen={isMenuOpen}
+        onClose={() => setIsMenuOpen(false)}
+        items={opcionesMenu}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+      />
+    </div>
+  )
+}
+```
+
+
+### Props de MobileMenuDrawer
+### Props de MobileMenuDrawer
+
+| Prop | Tipo | Descripción |
+| :--- | :--- | :--- |
+| `isOpen` | `boolean` | Controla la visibilidad en pantalla del menú desplegable. |
+| `onClose` | `() => void` | Callback ejecutado al presionar el botón de cerrar (`X`) o seleccionar una pestaña. |
+| `items` | `NavItem[]` | Array de opciones con estructura `{ id, label, icon, hasDivider? }`. |
+| `activeTab` | `string` | ID de la pestaña seleccionada actualmente. |
+| `onTabChange` | `(id: string) => void` | Callback gatillado al pulsar una nueva opción del menú. Devuelve el `id`. |
+
+