From 6ce28596c89689a35857fcb4ad643c77ab4e7e11 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 30 Oct 2025 11:23:21 -0600
Subject: [PATCH] Fix: Corregir icono del toggle en carga inicial de la sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

El icono del toggle mostraba "X" (cerrar) en lugar del icono hamburguesa
al cargar la página, aunque se corregía tras la primera interacción.

Causa raíz:
- UDashboardGroup inicializa sidebarOpen en false
- Nuestro composable inicializaba open en true por defecto
- El toggle lee el estado del contexto de DashboardGroup
- Desincronización causaba que el icono mostrara el estado incorrecto

Solución:
- Cambiar el default de open a false en el composable
- En desktop, open=false es correcto (no hay overlay, sidebar siempre visible)
- En mobile, open=false significa overlay cerrado (comportamiento esperado)
- Alineación total con el comportamiento de Nuxt UI

Archivos modificados:
- app/composables/useSidebarState.ts:43-46 (default open: false)
- app/composables/useSidebarState.ts:57 (fallback a false)

Referencias:
- app/composables/useSidebarState.ts:46
- app/composables/useSidebarState.ts:57
---
 nuxt4-app/app/composables/useSidebarState.ts | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/nuxt4-app/app/composables/useSidebarState.ts b/nuxt4-app/app/composables/useSidebarState.ts
index d0a272f..5ebddfe 100644
--- a/nuxt4-app/app/composables/useSidebarState.ts
+++ b/nuxt4-app/app/composables/useSidebarState.ts
@@ -30,12 +30,20 @@ const sidebarState = ref<SidebarState | null>(null)
 export function useSidebarState() {
   const route = useRoute()
 
+  // Detectar si estamos en mobile (debe hacerse antes de leer el estado)
+  const isMobile = computed(() => {
+    if (import.meta.server) return false
+    return window.innerWidth < 1024 // lg breakpoint
+  })
+
   // Inicializar estado solo una vez (singleton)
   if (!sidebarState.value) {
     // Leer de cookie si existe
     const savedState = useCookie<SidebarState>(STORAGE_KEY, {
       default: () => ({
-        open: true,
+        // En desktop, open=false porque no hay overlay (la sidebar siempre está visible)
+        // En mobile, open=false significa que el overlay está cerrado (comportamiento correcto)
+        open: false,
         collapsed: false,
         size: 28 // defaultSize
       })
@@ -46,7 +54,7 @@ export function useSidebarState() {
 
   // Referencias reactivas al estado
   const open = computed({
-    get: () => sidebarState.value?.open ?? true,
+    get: () => sidebarState.value?.open ?? false,
     set: (value: boolean) => {
       if (sidebarState.value) {
         sidebarState.value.open = value
@@ -98,12 +106,6 @@ export function useSidebarState() {
     collapsed.value = value
   }
 
-  // Detectar si estamos en mobile
-  const isMobile = computed(() => {
-    if (import.meta.server) return false
-    return window.innerWidth < 1024 // lg breakpoint
-  })
-
   // Auto-cerrar en navegación solo en mobile
   if (import.meta.client) {
     watch(() => route.fullPath, () => {