search/app/layouts/default.vue

66 lines
1.6 KiB
Vue
Executable File

<script setup lang="ts">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import type { NavigationMenuItem } from '@nuxt/ui'
import { useFavoritesStore } from '~/stores/favorites'
const open = ref(false)
// Activa los atajos de teclado g-a / g-c / g-f.
useDashboard()
const favorites = useFavoritesStore()
const { total: favTotal } = storeToRefs(favorites)
const links = computed<NavigationMenuItem[][]>(() => [[{
label: 'Actividades',
icon: 'i-lucide-calendar-days',
to: '/actividades',
onSelect: () => { open.value = false }
}, {
label: 'Conferencias',
icon: 'i-lucide-mic',
to: '/conferencias',
onSelect: () => { open.value = false }
}, {
label: 'Mi lista',
icon: 'i-lucide-bookmark',
to: '/favoritos',
badge: favTotal.value > 0 ? String(favTotal.value) : undefined,
onSelect: () => { open.value = false }
}]])
</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 v-if="!collapsed" as="button" class="font-semibold">La Gran Carpa Catedral</ULink>
</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>