search/app/layouts/default.vue

53 lines
1.2 KiB
Vue
Executable File

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const open = ref(false)
const links = [[{
label: 'Estudios Bíblicos',
icon: 'ph:books',
to: '/actividades',
onSelect: () => { open.value = false }
}, {
label: 'Conferencias',
icon: 'ph:books',
to: '/conferencias',
onSelect: () => { open.value = false }
}]] satisfies NavigationMenuItem[][]
</script>
<template>
<UDashboardGroup unit="rem">
<UDashboardSidebar
id="default"
v-model:open="open"
collapsible
resizable
class="bg-elevated/25 bg-gradient-to-tr from-blue-100 to-white"
:ui="{ footer: 'lg:border-t lg:border-default' }"
>
<template #header>
<div class="mt-2 flex justify-center">
<img src="/logo.svg" class="w-full" alt="Buscador - La Gran Carpa Catedral" />
</div>
</template>
<template #default="{ collapsed }">
<UNavigationMenu
:collapsed="collapsed"
:items="links[0]"
orientation="vertical"
tooltip
popover
/>
</template>
<template #footer="{ collapsed }">
<UserMenu :collapsed="collapsed" />
</template>
</UDashboardSidebar>
<slot />
</UDashboardGroup>
</template>