Fix: Usar props correctos de NavigationMenu para color de tab activa
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 48s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 48s
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
This commit is contained in:
@@ -47,14 +47,9 @@
|
|||||||
:collapsed="isCollapsed"
|
:collapsed="isCollapsed"
|
||||||
:items="navigationPrimary"
|
:items="navigationPrimary"
|
||||||
orientation="vertical"
|
orientation="vertical"
|
||||||
|
color="success"
|
||||||
|
variant="pill"
|
||||||
class="gap-1"
|
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'
|
|
||||||
}
|
|
||||||
}"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user