Fix: Actualizar layout informe para usar estado unificado de sidebar
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 51s

Problema identificado:
- Páginas con layout 'informe' mostraban icono inconsistente
- Páginas con layout 'dashboard' funcionaban correctamente
- Layout 'informe' seguía usando refs locales obsoletas

Causa raíz:
El layout 'informe' no fue actualizado en el refactor inicial:
- Línea 4: <AppSidebar v-model:open="sidebarOpen" v-model:collapsed="sidebarCollapsed" />
- Líneas 190-191: Refs locales que sobrescriben el composable
- Las props v-model forzaban estado local en lugar de usar singleton

Análisis por layout:
 Funcionaban (layout: dashboard):
  - index, explorer, rawExplorer, metadatos, notifications, settings

 No funcionaban (layout: informe):
  - panorama, informe-ingresos, comparativa-cosechas, metabase-debug

Solución aplicada:
1. Eliminar v-model:open y v-model:collapsed de <AppSidebar />
2. Remover refs locales sidebarOpen y sidebarCollapsed
3. Remover función isMobile() duplicada
4. Usar useSidebarState() como única fuente de verdad

Cambios:
- app/layouts/informe.vue:4 - Remover v-models de AppSidebar
- app/layouts/informe.vue:183 - Usar useSidebarState() composable
- app/layouts/informe.vue:190-191 - Eliminar refs locales

Resultado:
✓ Icono consistente en TODAS las páginas
✓ Ambos layouts usan la misma arquitectura
✓ Estado completamente unificado
✓ Sin refs locales que sobrescriban el singleton

Referencias:
- app/layouts/informe.vue:4
- app/layouts/informe.vue:183
This commit is contained in:
2025-10-30 11:34:01 -06:00
parent 01e35a2c0b
commit b7aba13e85

View File

@@ -1,7 +1,7 @@
<template>
<div class="brand-shell min-h-screen text-[#fef9f0]">
<UDashboardGroup storage-key="analytics-dashboard" class="h-full">
<AppSidebar v-model:open="sidebarOpen" v-model:collapsed="sidebarCollapsed" />
<AppSidebar />
<UDashboardPanel class="bg-transparent">
<template #header>
@@ -179,16 +179,8 @@ import { useRoute } from 'vue-router'
const route = useRoute()
// Detectar si es móvil en el primer montaje
const isMobile = () => {
if (import.meta.client) {
return window.innerWidth < 1024 // lg breakpoint
}
return false
}
const sidebarOpen = ref(!isMobile()) // Cerrada en móvil, abierta en desktop
const sidebarCollapsed = ref(false)
// Usar el composable unificado para el estado de la sidebar
const sidebarState = useSidebarState()
const showActions = ref(true)