i18n: AppSidebar + NavUser traducidos

src/components/AppSidebar.vue

@@ -5,6 +5,7 @@ import {
   Clock,
   ChevronRight,
 } from 'lucide-vue-next'
+import { useI18n } from 'vue-i18n'
 import {
   Sidebar,
   SidebarContent,
@@ -28,6 +29,8 @@ defineProps<{
   activeTab: string
 }>()
 
+const { t } = useI18n()
+
 const emit = defineEmits<{
   'update:activeTab': [value: string]
 }>()
@@ -45,36 +48,36 @@ function setTab(tab: string) {
 
     <SidebarContent>
       <SidebarGroup>
-        <SidebarGroupLabel>Navegación</SidebarGroupLabel>
+        <SidebarGroupLabel>{{ t('sidebar.navigation') }}</SidebarGroupLabel>
         <SidebarMenu>
           <SidebarMenuItem>
             <SidebarMenuButton
               :is-active="activeTab === 'dashboard'"
-              :tooltip="'Diagnóstico'"
+              :tooltip="t('sidebar.diagnosis')"
               @click="setTab('dashboard')"
             >
               <LayoutDashboard />
-              <span>Diagnóstico</span>
+              <span>{{ t('sidebar.diagnosis') }}</span>
             </SidebarMenuButton>
           </SidebarMenuItem>
           <SidebarMenuItem>
             <SidebarMenuButton
               :is-active="activeTab === 'calendar'"
-              :tooltip="'Calendario'"
+              :tooltip="t('sidebar.calendar')"
               @click="setTab('calendar')"
             >
               <Calendar />
-              <span>Calendario</span>
+              <span>{{ t('sidebar.calendar') }}</span>
             </SidebarMenuButton>
           </SidebarMenuItem>
           <SidebarMenuItem>
             <SidebarMenuButton
               :is-active="activeTab === 'scheduler'"
-              :tooltip="'Recetas'"
+              :tooltip="t('sidebar.scheduler')"
               @click="setTab('scheduler')"
             >
               <Clock />
-              <span>Recetas</span>
+              <span>{{ t('sidebar.scheduler') }}</span>
             </SidebarMenuButton>
           </SidebarMenuItem>
         </SidebarMenu>

src/components/NavUser.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useAuthStore } from '@/stores/auth'
+import { useI18n } from 'vue-i18n'
 import {
   ChevronsUpDown,
   LogOut,
@@ -19,6 +20,7 @@ import {
 } from '@/components/ui/sidebar'
 
 const auth = useAuthStore()
+const { t } = useI18n()
 const { isMobile } = useSidebar()
 
 const initials = (auth.user?.name || 'U').split(' ').map(n => n[0]).join('').slice(0, 2).toUpperCase()
@@ -35,11 +37,11 @@ const avatarSrc = '/Evil_Morty_Profile_Icon.webp'
             class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
           >
             <Avatar class="h-8 w-8 rounded-lg grayscale">
-              <AvatarImage :src="avatarSrc" :alt="auth.user?.name || 'Usuario'" />
+              <AvatarImage :src="avatarSrc" :alt="auth.user?.name || t('sidebar.userAlt')" />
               <AvatarFallback class="rounded-lg">{{ initials }}</AvatarFallback>
             </Avatar>
             <div class="grid flex-1 text-left text-sm leading-tight">
-              <span class="truncate font-medium">{{ auth.user?.name || 'Usuario' }}</span>
+              <span class="truncate font-medium">{{ auth.user?.name || t('sidebar.userFallback') }}</span>
               <span class="truncate text-xs text-muted-foreground">{{ auth.user?.email }}</span>
             </div>
             <ChevronsUpDown class="ml-auto size-4" />
@@ -53,7 +55,7 @@ const avatarSrc = '/Evil_Morty_Profile_Icon.webp'
         >
           <DropdownMenuItem class="gap-2 text-muted-foreground" @click="auth.logout()">
             <LogOut class="size-4" />
-            Cerrar sesión
+            {{ t('sidebar.logout') }}
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>