search/app/layouts/default.vue

133 lines
2.8 KiB
Vue
Executable File

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const route = useRoute()
const toast = useToast()
const open = ref(false)
const links = [[{
label: 'Home',
icon: 'i-lucide-house',
to: '/',
onSelect: () => {
open.value = false
}
}, {
label: 'Actividades',
icon: 'i-lucide-inbox',
to: '/actividades',
badge: '4',
onSelect: () => {
open.value = false
}
}, {
label: 'Conferencias',
icon: 'i-lucide-inbox',
to: '/conferencias',
onSelect: () => {
open.value = false
}
}], [
// {
// label: 'Feedback',
// icon: 'i-lucide-message-circle',
// to: 'https://github.com/nuxt-ui-templates/dashboard',
// target: '_blank'
// }, {
// label: 'Help & Support',
// icon: 'i-lucide-info',
// to: 'https://github.com/nuxt-ui-templates/dashboard',
// target: '_blank'
// }
]] satisfies NavigationMenuItem[][]
const groups = computed(() => [{
id: 'links',
label: 'Go to',
items: links.flat()
}, {
id: 'code',
label: 'Code',
items: [{
id: 'source',
label: 'View page source',
icon: 'i-simple-icons-github',
to: `https://github.com/nuxt-ui-templates/dashboard/blob/main/app/pages${route.path === '/' ? '/index' : route.path}.vue`,
target: '_blank'
}]
}])
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 }">
<ULink as="button">La Gran Carpa Catedral</ULink>
</template>
<template #default="{ collapsed }">
<UDashboardSearchButton :collapsed="collapsed" class="bg-transparent ring-default" />
<UNavigationMenu
:collapsed="collapsed"
:items="links[0]"
orientation="vertical"
tooltip
popover
/>
<UNavigationMenu
:collapsed="collapsed"
:items="links[1]"
orientation="vertical"
tooltip
class="mt-auto"
/>
</template>
<template #footer="{ collapsed }">
<UserMenu :collapsed="collapsed" />
</template>
</UDashboardSidebar>
<UDashboardSearch :groups="groups" />
<slot />
<NotificationsSlideover />
</UDashboardGroup>
</template>