25 lines
1.1 KiB
Markdown
25 lines
1.1 KiB
Markdown
# F-159 — Diseño
|
|
|
|
## Arquitectura
|
|
El estado vive en `DashboardShell`, única composición del layout autenticado:
|
|
|
|
- `desktopCollapsed`: preferencia persistida en `localStorage` bajo `mdv.admin.sidebar.collapsed`.
|
|
- `mobileOpen`: estado efímero del drawer.
|
|
|
|
`Sidebar` y `NavItemRow` siguen consumiendo la misma lista `visibleNavItems(role)`. No se crean menús alternativos.
|
|
|
|
## Responsive
|
|
- Sidebar base: drawer `fixed`, 240px y desplazado fuera de viewport cuando está cerrado.
|
|
- `lg+`: pasa a `sticky`, siempre visible, ancho 240px/80px según preferencia.
|
|
- Etiquetas usan `lg:hidden` solo durante collapse, por lo que el drawer móvil siempre conserva texto.
|
|
- Backdrop solo se renderiza con drawer abierto.
|
|
|
|
## Accesibilidad
|
|
- Toggle es `<button>` nativo con `aria-expanded`, `aria-controls` y etiqueta dinámica.
|
|
- Escape cierra drawer.
|
|
- Drawer móvil cerrado usa `invisible` para excluir enlaces del foco.
|
|
- Enlaces tienen `aria-label`; modo icon-only añade `title`.
|
|
|
|
## Transiciones
|
|
`transition-[width,transform] duration-300 ease-in-out`, respetando las utilidades existentes de Tailwind.
|