UI layout establecido

2025-09-29 19:59:45 -06:00
parent 9a6b778f54
commit 7d4af71183
4 changed files with 1021 additions and 768 deletions
--- a/nuxt4-app/app/layouts/dashboard.vue
+++ b/nuxt4-app/app/layouts/dashboard.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="brand-shell min-h-screen text-[#fef9f0]">
+  <UDashboardGroup storage-key="analytics-dashboard" class="h-full">
+    <UDashboardSidebar
+      v-model:open="sidebarOpen"
+      v-model:collapsed="sidebarCollapsed"
+      collapsible
+      resizable
+      :default-size="28"
+      :min-size="20"
+      :max-size="38"
+      :toggle="{ color: 'primary', variant: 'subtle', class: 'rounded-full' }"
+    >
+      <template #header="{ collapsed }">
+        <div class="flex items-center gap-2">
+          <img
+            v-if="!collapsed"
+            src="/logo.png"
+            alt="Analítica Núcleo"
+            class="h-8 w-8 rounded-full border border-[#ffe0a0]/40"
+          />
+          <UIcon v-else name="i-lucide-activity" class="size-5 text-[#ffe0a0]" />
+          <span v-if="!collapsed" class="text-sm font-semibold text-[var(--brand-text)]">Analítica Núcleo</span>
+        </div>
+      </template>
+
+      <template #default="{ collapsed }">
+        <UButton
+          :label="collapsed ? undefined : 'Buscar...'"
+          icon="i-lucide-search"
+          color="neutral"
+          variant="outline"
+          block
+          :square="collapsed"
+          class="mb-4"
+        >
+          <template v-if="!collapsed" #trailing>
+            <div class="flex items-center gap-0.5 ms-auto text-[var(--brand-text-muted)]">
+              <UKbd value="⌘" variant="subtle" />
+              <UKbd value="K" variant="subtle" />
+            </div>
+          </template>
+        </UButton>
+
+        <UNavigationMenu
+          :collapsed="collapsed"
+          :items="navigationPrimary"
+          orientation="vertical"
+          class="gap-1"
+        />
+
+        <UNavigationMenu
+          :collapsed="collapsed"
+          :items="navigationSecondary"
+          orientation="vertical"
+          class="mt-auto gap-1"
+        />
+      </template>
+
+      <template #footer="{ collapsed }">
+        <UButton
+          :avatar="{ src: 'https://avatars.githubusercontent.com/u/12011070?v=4' }"
+          :label="collapsed ? undefined : 'Equipo Núcleo'"
+          color="neutral"
+          variant="ghost"
+          class="w-full justify-start"
+          :block="collapsed"
+        >
+          <template #trailing>
+            <UIcon name="i-lucide-log-out" class="size-4" />
+          </template>
+        </UButton>
+      </template>
+    </UDashboardSidebar>
+
+    <UDashboardPanel class="bg-transparent">
+      <template #header>
+        <div class="flex flex-col gap-4 px-4 py-4 lg:px-6">
+          <UDashboardNavbar :title="pageTitle" icon="i-lucide-pie-chart" toggle-side="left">
+            <template #leading>
+              <UDashboardSidebarCollapse variant="subtle" />
+            </template>
+            <template #toggle>
+              <UDashboardSidebarToggle variant="subtle" />
+            </template>
+            <template #trailing>
+              <UBadge variant="subtle" label="Supabase" class="uppercase tracking-wide" />
+              <UBadge variant="subtle" label="Solo lectura" class="uppercase tracking-wide" />
+            </template>
+          </UDashboardNavbar>
+        </div>
+      </template>
+
+      <template #body>
+        <div class="px-4 pb-10 lg:px-8">
+          <slot />
+        </div>
+      </template>
+    </UDashboardPanel>
+  </UDashboardGroup>
+</div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const route = useRoute()
+
+const sidebarOpen = ref(true)
+const sidebarCollapsed = ref(false)
+
+const navigationPrimary = computed<NavigationMenuItem[]>(() => [
+  {
+    label: 'Inicio',
+    icon: 'i-lucide-home',
+    to: '/',
+    active: route.path === '/'
+  },
+  {
+    label: 'Explorador de datos',
+    icon: 'i-lucide-table',
+    to: '/explorer',
+    active: route.path === '/explorer'
+  }
+])
+
+const navigationSecondary: NavigationMenuItem[] = [
+  {
+    label: 'Documentación',
+    icon: 'i-lucide-book-open',
+    to: 'https://ui.nuxt.com',
+    target: '_blank'
+  },
+  {
+    label: 'Repositorio',
+    icon: 'i-lucide-github',
+    to: 'https://gitea.nucleoriofrio.com/nucleo000/analiticaNucleo',
+    target: '_blank'
+  }
+]
+
+const pageTitle = computed(() => (route.meta.title as string) || 'Panel')
+</script>