analiticaNucleo/nuxt4-app/app/layouts/dashboard.vue

<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: 'Panorama Facturador',
    icon: 'i-lucide-bar-chart-3',
    to: '/panorama',
    active: route.path === '/panorama'
  },
  {
    label: 'Informe Ingresos',
    icon: 'i-lucide-file-bar-chart',
    to: '/informe-ingresos',
    active: route.path === '/informe-ingresos'
  },
  {
    label: 'Explorador de datos',
    icon: 'i-lucide-table',
    to: '/explorer',
    active: route.path === '/explorer'
  },
  {
    label: 'Metadatos',
    icon: 'i-lucide-database',
    to: '/metadatos',
    active: route.path === '/metadatos'
  },
  {
    label: 'Explorador de datos raw',
    icon: 'i-lucide-table',
    to: '/rawExplorer',
    active: route.path === '/rawExplorer'
  }
])

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>