Style: Aplicar tema café/dorado personalizado a la sidebar
Some checks failed
build-and-deploy / build-and-deploy (push) Has been cancelled
Some checks failed
build-and-deploy / build-and-deploy (push) Has been cancelled
Reemplaza todos los colores por defecto de Nuxt UI (azules y verdes) en la sidebar con la paleta de colores café/dorado personalizada. - Toggle button: color neutral con hover café/dorado - Tarjeta de usuario: fondo brand-surface con borde brand-border - Avatar: ring brand-primary, indicador brand-accent - Avatar generado: background café (c08040) en lugar de azul - Botones de acción: hover brand-primary/10, iconos en colores del tema - Badge notificaciones: brand-accent con texto brand-bg - Botón cerrar sesión: colores del tema en lugar de rojo - Vista colapsada: todos los colores actualizados
This commit is contained in:
@@ -7,7 +7,7 @@
|
|||||||
:default-size="28"
|
:default-size="28"
|
||||||
:min-size="20"
|
:min-size="20"
|
||||||
:max-size="38"
|
:max-size="38"
|
||||||
:toggle="{ color: 'primary', variant: 'subtle', class: 'rounded-full' }"
|
:toggle="{ color: 'neutral', variant: 'ghost', class: 'rounded-full hover:bg-[var(--brand-primary)]/10 text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)]' }"
|
||||||
>
|
>
|
||||||
<template #header="{ collapsed: isCollapsed }">
|
<template #header="{ collapsed: isCollapsed }">
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
@@ -57,26 +57,26 @@
|
|||||||
class="p-0 space-y-2"
|
class="p-0 space-y-2"
|
||||||
>
|
>
|
||||||
<!-- User Info Card -->
|
<!-- User Info Card -->
|
||||||
<div class="px-3 py-2.5 bg-gradient-to-br from-primary-50/50 to-transparent dark:from-primary-950/20 dark:to-transparent rounded-lg border border-primary-100/60 dark:border-primary-900/40">
|
<div class="px-3 py-2.5 bg-gradient-to-br from-[var(--brand-surface)] to-transparent rounded-lg border border-[var(--brand-border)]/60">
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<div class="relative flex-shrink-0">
|
<div class="relative flex-shrink-0">
|
||||||
<UAvatar
|
<UAvatar
|
||||||
v-bind="userAvatar"
|
v-bind="userAvatar"
|
||||||
size="md"
|
size="md"
|
||||||
:ui="{
|
:ui="{
|
||||||
wrapper: 'ring-2 ring-primary-400/50 dark:ring-primary-500/40 shadow-sm'
|
wrapper: 'ring-2 ring-[var(--brand-primary)]/50 shadow-sm'
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<span
|
<span
|
||||||
class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 border-2 border-white dark:border-gray-950 rounded-full shadow-sm"
|
class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-[var(--brand-accent)] border-2 border-[var(--brand-surface)] rounded-full shadow-sm"
|
||||||
title="En línea"
|
title="En línea"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 min-w-0">
|
<div class="flex-1 min-w-0">
|
||||||
<p class="font-semibold text-sm text-gray-900 dark:text-white truncate leading-tight">
|
<p class="font-semibold text-sm text-[var(--brand-text)] truncate leading-tight">
|
||||||
{{ user.name || user.username }}
|
{{ user.name || user.username }}
|
||||||
</p>
|
</p>
|
||||||
<p class="text-xs text-gray-500 dark:text-gray-400 truncate mt-0.5">
|
<p class="text-xs text-[var(--brand-text-muted)] truncate mt-0.5">
|
||||||
{{ user.email }}
|
{{ user.email }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -91,24 +91,24 @@
|
|||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
block
|
block
|
||||||
class="justify-start gap-2.5 hover:bg-gradient-to-r hover:from-primary-50/90 hover:to-green-50/60 dark:hover:from-primary-950/40 dark:hover:to-green-950/30 transition-all duration-300 hover:shadow-sm"
|
class="justify-start gap-2.5 hover:bg-[var(--brand-primary)]/10 transition-all duration-300 hover:shadow-sm"
|
||||||
:ui="{
|
:ui="{
|
||||||
rounded: 'rounded-lg',
|
rounded: 'rounded-lg',
|
||||||
padding: { sm: 'px-2.5 py-2' }
|
padding: { sm: 'px-2.5 py-2' }
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<template #leading>
|
<template #leading>
|
||||||
<div class="w-7 h-7 rounded-md bg-gradient-to-br from-primary-50 to-green-50 dark:from-primary-950/40 dark:to-green-950/40 flex items-center justify-center flex-shrink-0 relative overflow-hidden shadow-sm border border-primary-100/40 dark:border-primary-900/30">
|
<div class="w-7 h-7 rounded-md bg-[var(--brand-surface)] flex items-center justify-center flex-shrink-0 relative overflow-hidden shadow-sm border border-[var(--brand-border)]">
|
||||||
<img
|
<img
|
||||||
src="/perfil-icon.png"
|
src="/perfil-icon.png"
|
||||||
alt="Perfil"
|
alt="Perfil"
|
||||||
class="w-4 h-4 absolute inset-0 m-auto object-cover rounded-sm opacity-90"
|
class="w-4 h-4 absolute inset-0 m-auto object-cover rounded-sm opacity-90"
|
||||||
@error="handlePerfilIconError"
|
@error="handlePerfilIconError"
|
||||||
/>
|
/>
|
||||||
<UIcon name="i-lucide-home" class="size-3.5 text-green-600 dark:text-green-400 opacity-0" />
|
<UIcon name="i-lucide-home" class="size-3.5 text-[var(--brand-primary)] opacity-0" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Inicio</span>
|
<span class="text-sm font-medium text-[var(--brand-text)]">Inicio</span>
|
||||||
</UButton>
|
</UButton>
|
||||||
|
|
||||||
<UButton
|
<UButton
|
||||||
@@ -117,18 +117,18 @@
|
|||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
block
|
block
|
||||||
class="justify-start gap-2.5 hover:bg-primary-50/80 dark:hover:bg-primary-950/30 transition-all duration-200"
|
class="justify-start gap-2.5 hover:bg-[var(--brand-primary)]/10 transition-all duration-200"
|
||||||
:ui="{
|
:ui="{
|
||||||
rounded: 'rounded-lg',
|
rounded: 'rounded-lg',
|
||||||
padding: { sm: 'px-2.5 py-2' }
|
padding: { sm: 'px-2.5 py-2' }
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<template #leading>
|
<template #leading>
|
||||||
<div class="w-7 h-7 rounded-md bg-gray-50 dark:bg-gray-800/50 flex items-center justify-center flex-shrink-0">
|
<div class="w-7 h-7 rounded-md bg-[var(--brand-surface)] flex items-center justify-center flex-shrink-0">
|
||||||
<UIcon name="i-lucide-settings" class="size-3.5 text-gray-600 dark:text-gray-400" />
|
<UIcon name="i-lucide-settings" class="size-3.5 text-[var(--brand-text-muted)]" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Configuración</span>
|
<span class="text-sm font-medium text-[var(--brand-text)]">Configuración</span>
|
||||||
</UButton>
|
</UButton>
|
||||||
|
|
||||||
<UButton
|
<UButton
|
||||||
@@ -137,31 +137,31 @@
|
|||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
block
|
block
|
||||||
class="justify-start gap-2.5 hover:bg-primary-50/80 dark:hover:bg-primary-950/30 transition-all duration-200"
|
class="justify-start gap-2.5 hover:bg-[var(--brand-primary)]/10 transition-all duration-200"
|
||||||
:ui="{
|
:ui="{
|
||||||
rounded: 'rounded-lg',
|
rounded: 'rounded-lg',
|
||||||
padding: { sm: 'px-2.5 py-2' }
|
padding: { sm: 'px-2.5 py-2' }
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<template #leading>
|
<template #leading>
|
||||||
<div class="w-7 h-7 rounded-md bg-amber-50 dark:bg-amber-950/30 flex items-center justify-center relative flex-shrink-0">
|
<div class="w-7 h-7 rounded-md bg-[var(--brand-surface)] flex items-center justify-center relative flex-shrink-0">
|
||||||
<UIcon name="i-lucide-bell" class="size-3.5 text-amber-600 dark:text-amber-400" />
|
<UIcon name="i-lucide-bell" class="size-3.5 text-[var(--brand-primary)]" />
|
||||||
<span class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-red-500 rounded-full ring-1 ring-white dark:ring-gray-900" />
|
<span class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-[var(--brand-accent)] rounded-full ring-1 ring-[var(--brand-surface)]" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Notificaciones</span>
|
<span class="text-sm font-medium text-[var(--brand-text)]">Notificaciones</span>
|
||||||
<template #trailing>
|
<template #trailing>
|
||||||
<UBadge color="red" variant="solid" size="xs" class="ml-auto">3</UBadge>
|
<UBadge color="neutral" variant="solid" size="xs" class="ml-auto bg-[var(--brand-accent)] text-[var(--brand-bg)]">3</UBadge>
|
||||||
</template>
|
</template>
|
||||||
</UButton>
|
</UButton>
|
||||||
|
|
||||||
<div class="pt-2 mt-1.5 border-t border-gray-200/60 dark:border-gray-800/60">
|
<div class="pt-2 mt-1.5 border-t border-[var(--brand-border)]">
|
||||||
<UButton
|
<UButton
|
||||||
color="neutral"
|
color="neutral"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
block
|
block
|
||||||
class="justify-start gap-2.5 hover:bg-red-50/80 dark:hover:bg-red-950/30 transition-all duration-200 group"
|
class="justify-start gap-2.5 hover:bg-[var(--brand-primary)]/10 transition-all duration-200 group"
|
||||||
:ui="{
|
:ui="{
|
||||||
rounded: 'rounded-lg',
|
rounded: 'rounded-lg',
|
||||||
padding: { sm: 'px-2.5 py-2' }
|
padding: { sm: 'px-2.5 py-2' }
|
||||||
@@ -169,11 +169,11 @@
|
|||||||
@click="logout"
|
@click="logout"
|
||||||
>
|
>
|
||||||
<template #leading>
|
<template #leading>
|
||||||
<div class="w-7 h-7 rounded-md bg-red-50 dark:bg-red-950/30 flex items-center justify-center flex-shrink-0 group-hover:bg-red-100 dark:group-hover:bg-red-950/50 transition-colors">
|
<div class="w-7 h-7 rounded-md bg-[var(--brand-surface)] flex items-center justify-center flex-shrink-0 group-hover:bg-[var(--brand-border)] transition-colors">
|
||||||
<UIcon name="i-lucide-log-out" class="size-3.5 text-red-600 dark:text-red-400" />
|
<UIcon name="i-lucide-log-out" class="size-3.5 text-[var(--brand-primary)]" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<span class="text-sm font-medium text-red-600 dark:text-red-400">Cerrar sesión</span>
|
<span class="text-sm font-medium text-[var(--brand-primary)]">Cerrar sesión</span>
|
||||||
</UButton>
|
</UButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -186,7 +186,7 @@
|
|||||||
color="neutral"
|
color="neutral"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
square
|
square
|
||||||
class="relative hover:bg-primary-50/50 dark:hover:bg-primary-950/20 transition-all duration-200"
|
class="relative hover:bg-[var(--brand-primary)]/10 transition-all duration-200"
|
||||||
:ui="{ rounded: 'rounded-lg' }"
|
:ui="{ rounded: 'rounded-lg' }"
|
||||||
>
|
>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
@@ -194,27 +194,27 @@
|
|||||||
v-bind="userAvatar"
|
v-bind="userAvatar"
|
||||||
size="sm"
|
size="sm"
|
||||||
:ui="{
|
:ui="{
|
||||||
wrapper: 'ring-2 ring-primary-400/40 dark:ring-primary-500/30 group-hover:ring-primary-500/60 transition-all duration-200 shadow-sm'
|
wrapper: 'ring-2 ring-[var(--brand-primary)]/40 group-hover:ring-[var(--brand-primary)]/60 transition-all duration-200 shadow-sm'
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<span
|
<span
|
||||||
class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-green-500 border-2 border-white dark:border-gray-950 rounded-full shadow-sm"
|
class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-[var(--brand-accent)] border-2 border-[var(--brand-surface)] rounded-full shadow-sm"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</UButton>
|
</UButton>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-full h-px bg-gray-200/50 dark:bg-gray-800/50" />
|
<div class="w-full h-px bg-[var(--brand-border)]" />
|
||||||
|
|
||||||
<UButton
|
<UButton
|
||||||
@click="logout"
|
@click="logout"
|
||||||
color="neutral"
|
color="neutral"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
square
|
square
|
||||||
class="hover:bg-red-50 dark:hover:bg-red-950/20 transition-all duration-200"
|
class="hover:bg-[var(--brand-primary)]/10 transition-all duration-200"
|
||||||
:ui="{ rounded: 'rounded-lg' }"
|
:ui="{ rounded: 'rounded-lg' }"
|
||||||
>
|
>
|
||||||
<UIcon name="i-lucide-log-out" class="size-4 text-red-600 dark:text-red-400" />
|
<UIcon name="i-lucide-log-out" class="size-4 text-[var(--brand-primary)]" />
|
||||||
</UButton>
|
</UButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -326,7 +326,7 @@ const { user, isAuthenticated, logout } = useAuthentik()
|
|||||||
|
|
||||||
// Computed para el avatar del usuario
|
// Computed para el avatar del usuario
|
||||||
const userAvatar = computed(() => ({
|
const userAvatar = computed(() => ({
|
||||||
src: user.value?.avatar || `https://ui-avatars.com/api/?name=${encodeURIComponent(user.value?.name || user.value?.username || 'User')}&background=3b82f6&color=fff&bold=true&format=svg`,
|
src: user.value?.avatar || `https://ui-avatars.com/api/?name=${encodeURIComponent(user.value?.name || user.value?.username || 'User')}&background=c08040&color=1b1209&bold=true&format=svg`,
|
||||||
alt: user.value?.name || user.value?.username || 'User'
|
alt: user.value?.name || user.value?.username || 'User'
|
||||||
}))
|
}))
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user