josedario87
4a3624b231
- Add AuthSessionStatusButton to dashboard layout navbar - Redesign button as compact icon button for navbar integration - Button checks session status against Authentik in real-time - Styled to match navbar aesthetic with hover effects
47 lines
1.5 KiB
Vue
47 lines
1.5 KiB
Vue
<template>
|
|
<div class="brand-shell min-h-screen text-[#fef9f0]">
|
|
<UDashboardGroup storage-key="analytics-dashboard" class="h-full">
|
|
<AppSidebar v-model:open="sidebarOpen" v-model:collapsed="sidebarCollapsed" />
|
|
|
|
<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" />
|
|
<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, ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
|
|
const sidebarOpen = ref(true)
|
|
const sidebarCollapsed = ref(false)
|
|
|
|
const pageTitle = computed(() => (route.meta.title as string) || 'Panel')
|
|
</script>
|