From 9768b31e3e2849cb5a9775c6dc24e03fd84b61f3 Mon Sep 17 00:00:00 2001 From: josedario87 Date: Fri, 31 Oct 2025 10:24:12 -0600 Subject: [PATCH] Fix: Usar props correctos de NavigationMenu para color de tab activa MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cambiar de configuración :ui incorrecta a props nativos del componente. Antes (INCORRECTO): - Usaba :ui="{ item: { base, active, inactive } }" - La propiedad 'item' NO existe en NavigationMenu v4 Después (CORRECTO): - Usar color="success" para aplicar colores del tema - Usar variant="pill" para activar estilos de estado activo - Eliminar objeto :ui que no era parte de la API del componente Según el código fuente de Nuxt UI v4, NavigationMenu solo aplica colores al estado activo con variant="pill" + color específico. Las compound variants del tema mapean text-success a las variables CSS del sistema de temas (--brand-success). Ref: node_modules/@nuxt/ui/.nuxt/ui/navigation-menu.ts líneas 289-296 --- nuxt4-app/app/components/app/AppSidebar.vue | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/nuxt4-app/app/components/app/AppSidebar.vue b/nuxt4-app/app/components/app/AppSidebar.vue index d7424ec..41dab94 100644 --- a/nuxt4-app/app/components/app/AppSidebar.vue +++ b/nuxt4-app/app/components/app/AppSidebar.vue @@ -47,14 +47,9 @@ :collapsed="isCollapsed" :items="navigationPrimary" orientation="vertical" + color="success" + variant="pill" class="gap-1" - :ui="{ - item: { - base: 'hover:text-[var(--brand-primary)] hover:bg-[var(--brand-primary)]/10', - active: 'bg-[var(--brand-success)]/15 text-[var(--brand-success)] border-l-2 border-[var(--brand-success)] font-medium', - inactive: 'text-[var(--brand-text-muted)] border-l-2 border-transparent' - } - }" />