161 lines
3.2 KiB
Vue
161 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import type { NavigationMenuItem } from '@nuxt/ui'
|
|
|
|
const toast = useToast()
|
|
|
|
const open = ref(false)
|
|
|
|
const links = [[
|
|
{
|
|
label: 'Home',
|
|
icon: 'i-lucide-home',
|
|
to: '/',
|
|
onSelect: () => {
|
|
open.value = false
|
|
}
|
|
},
|
|
{
|
|
label: 'My Reading',
|
|
icon: 'i-lucide-history',
|
|
defaultOpen: true,
|
|
children: [
|
|
{
|
|
label: 'History',
|
|
to: '/myreading/history',
|
|
onSelect: () => {
|
|
open.value = false
|
|
}
|
|
},
|
|
{
|
|
label: 'Library',
|
|
to: '/myreading/library',
|
|
onSelect: () => {
|
|
open.value = false
|
|
}
|
|
},
|
|
{
|
|
label: 'Updates',
|
|
to: '/myreading/updates',
|
|
onSelect: () => {
|
|
open.value = false
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: 'Titles',
|
|
icon: 'i-lucide-book',
|
|
defaultOpen: true,
|
|
children: [
|
|
{
|
|
label: 'Advanced Search',
|
|
to: '/titles/search',
|
|
// icon: 'i-lucide-search',
|
|
onSelect: () => {
|
|
open.value = false
|
|
}
|
|
},
|
|
{
|
|
label: 'Recently Added',
|
|
to: '/titles/recently-added',
|
|
// icon: 'i-lucide-clock',
|
|
onSelect: () => {
|
|
open.value = false
|
|
}
|
|
},
|
|
{
|
|
label: 'Latest Updates',
|
|
to: '/titles/latest',
|
|
// icon: 'i-lucide-refresh-cw',
|
|
onSelect: () => {
|
|
open.value = false
|
|
}
|
|
},
|
|
{
|
|
label: 'Random',
|
|
to: '/titles/random',
|
|
// icon: 'i-lucide-shuffle',
|
|
onSelect: () => {
|
|
open.value = false
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]] satisfies NavigationMenuItem[][]
|
|
|
|
const groups = computed(() => [{
|
|
id: 'main',
|
|
items: links.flat()
|
|
}])
|
|
|
|
onMounted(async () => {
|
|
const cookie = useCookie('cookie-consent')
|
|
if (cookie.value === 'accepted') {
|
|
return
|
|
}
|
|
|
|
toast.add({
|
|
title: 'We use first-party cookies to enhance your experience on our website.',
|
|
duration: 0,
|
|
close: false,
|
|
actions: [{
|
|
label: 'Accept',
|
|
color: 'neutral',
|
|
variant: 'outline',
|
|
onClick: () => {
|
|
cookie.value = 'accepted'
|
|
}
|
|
}, {
|
|
label: 'Opt out',
|
|
color: 'neutral',
|
|
variant: 'ghost'
|
|
}]
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardGroup unit="rem">
|
|
<UDashboardSidebar
|
|
id="default"
|
|
v-model:open="open"
|
|
collapsible
|
|
resizable
|
|
class="bg-elevated/25"
|
|
:ui="{ footer: 'lg:border-t lg:border-default' }"
|
|
>
|
|
<template #header="{ collapsed }">
|
|
<AppLogo :collapsed="collapsed" />
|
|
</template>
|
|
|
|
<template #default="{ collapsed }">
|
|
<UDashboardSearchButton :collapsed="collapsed" class="bg-transparent ring-default" />
|
|
|
|
<UNavigationMenu
|
|
:collapsed="collapsed"
|
|
:items="links"
|
|
orientation="vertical"
|
|
tooltip
|
|
popover
|
|
/>
|
|
|
|
<!-- <UNavigationMenu
|
|
:collapsed="collapsed"
|
|
:items="links[1]"
|
|
orientation="vertical"
|
|
tooltip
|
|
class="mt-auto"
|
|
/> -->
|
|
</template>
|
|
|
|
<template #footer="{ collapsed }">
|
|
<SettingsMenu :collapsed="collapsed" />
|
|
</template>
|
|
</UDashboardSidebar>
|
|
|
|
<UDashboardSearch :groups="groups" />
|
|
|
|
<slot />
|
|
</UDashboardGroup>
|
|
</template>
|