[UI / PRESENTATION] F-00.3 — Layout Base y Navegación Compartida
Épica: EPIC-00 — Setup e Infraestructura Base
🏷️ Categoría
Categoría: UI / PresentationImpacta en: Equipo Frontend (Livewire/Blade)
📦 Dependencias
Backlogs que deben estar completados antes de implementar esta feature.
| Backlog | Motivo |
|---|---|
| F-00.1 | Entorno Laravel + Livewire operativo |
| F-00.2 | Modelo User disponible para mostrar nombre del usuario en la barra de navegación |
Prioridad: Must
Descripción: Como administrador del sistema Quiero que todas las páginas del panel compartan el mismo layout con una barra de navegación consistente Para poder moverse entre las secciones (Dashboard, Logs, Histórico, Error Codes) sin desorientarme
Criterios de Aceptación (Checklist):
- [ ] Escenario 1 (Layout base): Dado que cualquier vista del panel se carga, cuando se renderiza, entonces usa el componente Blade
x-layoutque incluye:<head>con meta, CSS Tailwind, Alpine.js/Livewire scripts, y un<main>con el slot de contenido. - [ ] Escenario 2 (Barra de navegación): El componente
x-navmuestra los 4 enlaces principales: Dashboard (/dashboard), Logs (/logs), Histórico (/historico), Error Codes (/error-codes). También muestra el nombre del usuario activo y el botón "Cerrar Sesión". - [ ] Escenario 3 (Enlace activo resaltado): Dado que estoy en la sección "Logs", cuando se renderiza la barra de navegación, entonces el enlace "Logs" aparece visualmente destacado (clase CSS activa) y los demás no.
- [ ] Escenario 4 (Mobile-first): Dado que accedo al panel desde un dispositivo móvil, cuando se muestra el layout, entonces la barra de navegación es responsiva: colapsa en un menú hamburguesa (Alpine.js
x-show) en pantallas < 768px. - [ ] Escenario 5 (Flash messages): Dado que una acción (archivar, guardar, borrar) se completa, cuando la vista se recarga/re-renderiza, entonces aparece un mensaje flash temporal (ej. "Guardado correctamente") en la parte superior del contenido, dentro del layout.
- [ ] Requisito Técnico: Componente Blade
resources/views/components/layout.blade.phpcon slot. Componente Bladeresources/views/components/nav.blade.php. La clase activa se calcula conrequest()->routeIs('logs.*')etc. Los scripts de Livewire se insertan con@livewireStyles/@livewireScripts.
MoSCoW: MUSTSprint: Sprint 0
Notas:
- Todos los componentes Blade son estáticos y reutilizables (no Livewire). Solo la lógica de "resaltar activo" es dinámica, pero se puede hacer con PHP en Blade puro.
- El layout debe cargarse en < 100ms sin assets externos (CDN). Todo local.
- Mobile-first: diseñar para pantallas de 375px de ancho mínimo, luego escalar.