# Componentes Reutilizables Este directorio contiene componentes reutilizables para evitar duplicar código en múltiples vistas. ## ⚡ Solución Rápida: JavaScript (Sin cambiar extensiones) **Para usar con archivos `.html` sin necesidad de cambiarlos a `.php`** ### Componentes HTML + JavaScript 1. **`navbar-user.html`** - Componente HTML del navbar del usuario 2. **`load-navbar-component.js`** - Script que carga el componente automáticamente ### Cómo Usar (HTML) **Opción A: Reemplazar el navbar existente automáticamente** En cualquier vista HTML, simplemente agrega este script antes de cerrar ``: ```html ``` El script **automáticamente**: - Busca el navbar existente en `.nav-right .dropdown` - Lo reemplaza con el componente actualizado - Ajusta las rutas relativas según la ubicación de la vista **Ejemplo en `OSM_TREAL.html`:** ```html ``` **Opción B: Marcar el navbar para reemplazo** Si quieres más control, agrega un `data-attribute` al navbar existente: ```html ``` ### Ventajas ✅ **No necesitas cambiar extensiones** - Funciona con `.html` ✅ **Automático** - El script detecta y reemplaza el navbar ✅ **Rutas inteligentes** - Ajusta rutas según ubicación ✅ **Mantenimiento fácil** - Cambias `navbar-user.html` y se actualiza en todas las vistas --- ## 🔧 Solución PHP: Includes (Requiere .php) **Para usar `include` de PHP, las vistas deben ser `.php`** ### Componentes PHP 1. **`navbar-user.php`** - Dropdown del usuario en el navbar 2. **`navbar-user-css.php`** - CSS común para el avatar circular 3. **`navbar-user-script.php`** - Script para actualizar navbar 4. **`path-helper.php`** - Helper para determinar rutas relativas ### Cómo Usar (PHP) Si tu vista es un archivo `.php`, simplemente incluye los componentes: ```php ``` ### Ejemplo Completo (PHP) ```php Reporte de Alertas
``` --- ## 🤔 ¿Cuál Usar? ### Usa JavaScript (HTML) si: - ✅ Quieres mantener tus archivos como `.html` - ✅ No quieres cambiar extensiones - ✅ Prefieres una solución más simple de implementar ### Usa PHP (Includes) si: - ✅ Ya estás usando PHP en tus vistas - ✅ Prefieres procesamiento del lado del servidor - ✅ Quieres mejor rendimiento (no carga extra en el cliente) --- ## 📝 Notas Importantes - Los componentes detectan automáticamente la ubicación del archivo que los incluye - Las rutas se calculan correctamente para: - Vistas en la raíz (`src/`) - Vistas en subdirectorios (`src/reportes/`, `src/cuenta/`, `src/osm-recorrido/`) - El script `update-navbar-user.js` se carga automáticamente con la ruta correcta --- ## 🚀 Migración Rápida ### Para migrar una vista a JavaScript (HTML): 1. Agrega antes de ``: ```html ``` 2. Listo. El navbar se actualizará automáticamente. ### Para migrar una vista a PHP: 1. Renombrar `.html` → `.php` 2. Reemplazar el HTML del navbar con `` 3. Agregar CSS y script con includes 4. Probar que funcione --- ## 📚 Documentación Adicional - Ver `_desarrollo/GUIA_MIGRACION_COMPONENTES.md` para guía detallada de migración PHP