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">
    <AppSidebar />

    <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>
              <AuthSessionStatusButton />
              <UserMenu />
            </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 } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// Usar el composable unificado para el estado de la sidebar
const sidebarState = useSidebarState()

const pageTitle = computed(() => (route.meta.title as string) || 'Panel')
</script>