Dashboard shadcn-vue sidebar + i18n + NavProjects conectado a KAPPA API

- Dashboard-01 block de shadcn-vue instalado (sidebar con tabs) - vue-i18n para traducciones ES/EN (detecta idioma del navegador) - NavProjects ahora usa initiative_name de KAPPA API - Dashboard stats conectados a API (HUs, sesiones, planeaciones) - Work items table con datos reales de KAPPA - Login: toggle password con icono de ojo - Toggle theme restaurado en SiteHeader - i18n con locale/en.json y locale/es.json -Nuevos componentes: NavMain, NavDocuments, NavSecondary en dashboard/ - NavUser原来的 - NavUser原来的
2026-05-23 14:59:17 -05:00
parent 8312389dab
commit 640f0ea889
27 changed files with 1558 additions and 103 deletions
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n"
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+import { SidebarTrigger } from "@/components/ui/sidebar"
+import { isDark, toggleTheme } from "@/composables/useTheme"
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <header class="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
+    <div class="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+      <SidebarTrigger class="-ml-1" />
+      <Separator
+        orientation="vertical"
+        class="mx-2 data-[orientation=vertical]:h-4"
+      />
+      <h1 class="text-base font-medium">
+        {{ t('siteHeader.title') }}
+      </h1>
+      <div class="ml-auto flex items-center gap-2">
+        <Button variant="ghost" size="icon" class="size-8" @click="toggleTheme()">
+          <svg v-if="isDark" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-[18px]">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+            <path d="M12 3l0 18" />
+            <path d="M12 9l4.65 -4.65" />
+            <path d="M12 14.3l7.37 -7.37" />
+            <path d="M12 19.6l8.85 -8.85" />
+          </svg>
+          <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-[18px]">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
+          </svg>
+          <span class="sr-only">Toggle theme</span>
+        </Button>
+      </div>
+    </div>
+  </header>
+</template>