From 79240bc1c31f217665a18782a0fb258953263d90 Mon Sep 17 00:00:00 2001
From: Ricardo Gonzalez <herrmonkey@gmail.com>
Date: Fri, 22 May 2026 23:13:16 -0500
Subject: [PATCH] NavUser: avatar con imagen + grayscale estilo demo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AvatarImage con fallback a iniciales
- grayscale en avatar (como la demo)
- Estructura footer idéntica a shadcn-vue.com
---
 src/components/NavUser.vue | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/NavUser.vue b/src/components/NavUser.vue
index 951788d..45bff2d 100644
--- a/src/components/NavUser.vue
+++ b/src/components/NavUser.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { useAuthStore } from '@/stores/auth'
-import { ChevronsUpDown, LogOut } from 'lucide-vue-next'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import {
+  ChevronsUpDown,
+  LogOut,
+} from 'lucide-vue-next'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -19,6 +22,7 @@ const auth = useAuthStore()
 const { isMobile } = useSidebar()
 
 const initials = (auth.user?.name || 'U').split(' ').map(n => n[0]).join('').slice(0, 2).toUpperCase()
+const avatarSrc = '/Evil_Morty_Profile_Icon.webp'
 </script>
 
 <template>
@@ -30,13 +34,12 @@ const initials = (auth.user?.name || 'U').split(' ').map(n => n[0]).join('').sli
             size="lg"
             class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
           >
-            <Avatar class="h-8 w-8 rounded-lg">
-              <AvatarFallback class="rounded-lg bg-primary text-primary-foreground text-xs">
-                {{ initials }}
-              </AvatarFallback>
+            <Avatar class="h-8 w-8 rounded-lg grayscale">
+              <AvatarImage :src="avatarSrc" :alt="auth.user?.name || 'Usuario'" />
+              <AvatarFallback class="rounded-lg">{{ initials }}</AvatarFallback>
             </Avatar>
             <div class="grid flex-1 text-left text-sm leading-tight">
-              <span class="truncate font-semibold">{{ auth.user?.name || 'Usuario' }}</span>
+              <span class="truncate font-medium">{{ auth.user?.name || 'Usuario' }}</span>
               <span class="truncate text-xs text-muted-foreground">{{ auth.user?.email }}</span>
             </div>
             <ChevronsUpDown class="ml-auto size-4" />