111 lines
2.7 KiB
Vue
Executable File
111 lines
2.7 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'
|
|
import { useHistoryStore } from '~/stores/history'
|
|
|
|
const { locale, locales, setLocale } = useI18n()
|
|
|
|
const { $i18n } = useNuxtApp();
|
|
const t = $i18n.t;
|
|
|
|
const open = ref(false)
|
|
|
|
const favorites = useFavoritesStore()
|
|
const { total: favTotal } = storeToRefs(favorites)
|
|
|
|
const history = useHistoryStore()
|
|
const { total: histTotal } = storeToRefs(history)
|
|
|
|
const links = [[{
|
|
label: t('nav.bible_studies'),
|
|
icon: 'ph:books',
|
|
to: '/actividades',
|
|
locale: locale.value,
|
|
onSelect: () => { open.value = false }
|
|
}, {
|
|
label: t("nav.conferences"),
|
|
icon: 'ph:books',
|
|
to: '/conferencias',
|
|
onSelect: () => { open.value = false }
|
|
}
|
|
// , {
|
|
// label: 'Sermones',
|
|
// icon: 'ph:books',
|
|
// to: '/sermones',
|
|
// onSelect: () => { open.value = false }
|
|
// }
|
|
, {
|
|
label: 'Entrelineas',
|
|
icon: 'ph:list-magnifying-glass',
|
|
to: '/entrelineas',
|
|
onSelect: () => { open.value = false }
|
|
}
|
|
// , {
|
|
// label: 'Imprenta',
|
|
// icon: 'ph:printer',
|
|
// to: '/imprenta',
|
|
// onSelect: () => { open.value = false }
|
|
// }, {
|
|
// label: 'EBN',
|
|
// icon: 'ph:chalkboard-teacher',
|
|
// to: '/ebn',
|
|
// 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 }
|
|
}, {
|
|
label: 'Historial',
|
|
icon: 'i-lucide-history',
|
|
to: '/historial',
|
|
badge: histTotal.value > 0 ? String(histTotal.value) : undefined,
|
|
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="{ collapsed }">
|
|
<div v-if="!collapsed" 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 }">
|
|
<ULocaleSelect
|
|
:model-value="locale"
|
|
:locales="Object.values(locales)"
|
|
@update:model-value="setLocale($event)"
|
|
/>
|
|
</template>
|
|
</UDashboardSidebar>
|
|
|
|
<slot />
|
|
</UDashboardGroup>
|
|
</template>
|