54 lines
1.3 KiB
Vue
54 lines
1.3 KiB
Vue
<template>
|
|
<UDashboardGroup>
|
|
<UDashboardSearch />
|
|
|
|
<UDashboardSidebar
|
|
v-model:open="open"
|
|
collapsible
|
|
resizable
|
|
class="bg-(--ui-bg-elevated)/25"
|
|
:ui="{ footer: 'lg:border-t lg:border-(--ui-border)' }"
|
|
>
|
|
<template #header>
|
|
<NuxtLink to="/">
|
|
<img src="../public/favicon.ico" alt="Logo" />
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<template #default="{ collapsed }">
|
|
<UDashboardSearchButton :collapsed="collapsed" class="bg-transparent ring-(--ui-border)" />
|
|
|
|
<UNavigationMenu :collapsed="collapsed" :items="links[0]" orientation="vertical" />
|
|
|
|
<UNavigationMenu :collapsed="collapsed" :items="links[1]" orientation="vertical" class="mt-auto" />
|
|
</template>
|
|
|
|
<template #footer="{ collapsed }">
|
|
<UserMenu :collapsed="collapsed" />
|
|
</template>
|
|
</UDashboardSidebar>
|
|
|
|
<slot />
|
|
|
|
<NotificationsSlideover v-model="isNotificationsSlideoverOpen" />
|
|
</UDashboardGroup>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const links = [[], []]
|
|
const open = ref(false)
|
|
|
|
const isNotificationsSlideoverOpen = ref(false)
|
|
const { unreadCount, fetchUnreadCount, startPeriodicRefresh } = useNotification()
|
|
|
|
onMounted(async () => {
|
|
await fetchUnreadCount()
|
|
startPeriodicRefresh()
|
|
})
|
|
|
|
provide('notificationState', {
|
|
isNotificationsSlideoverOpen,
|
|
unreadCount
|
|
})
|
|
</script>
|