142 lines
4.0 KiB
Vue
142 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import { useTitleStore } from '~/stores/title';
|
|
|
|
const { loggedIn, clear, user } = useUserSession();
|
|
|
|
const route = useRoute();
|
|
const breakpoints = useBreakpoint();
|
|
const titleStore = useTitleStore();
|
|
|
|
const isSidebarVisible = ref(breakpoints.mdUp);
|
|
|
|
watchEffect(() => {
|
|
isSidebarVisible.value = breakpoints.smUp;
|
|
});
|
|
|
|
const slugs = computed(() => checkSlug(route.params));
|
|
</script>
|
|
|
|
<template>
|
|
<VaLayout
|
|
:top="{ fixed: true, order: 2 }"
|
|
:left="{
|
|
fixed: true,
|
|
absolute: breakpoints.smDown,
|
|
order: 1,
|
|
overlay: breakpoints.smDown && isSidebarVisible
|
|
}"
|
|
@left-overlay-click="isSidebarVisible = false"
|
|
>
|
|
<template #top>
|
|
<VaNavbar shadowed>
|
|
<template #left>
|
|
<VaButton
|
|
preset="secondary"
|
|
:icon="isSidebarVisible ? 'menu_open' : 'menu'"
|
|
@click="isSidebarVisible = !isSidebarVisible"
|
|
/>
|
|
</template>
|
|
<template #center>
|
|
{{ titleStore.title || $t('layouts.default_tile') }}</template
|
|
>
|
|
</VaNavbar>
|
|
</template>
|
|
|
|
<template #left>
|
|
<VaSidebar v-model="isSidebarVisible">
|
|
<VaSidebarItem
|
|
:to="$localePath('/')"
|
|
:active="$localePath('/') === route.path"
|
|
>
|
|
<VaSidebarItemContent>
|
|
<VaIcon name="home" />
|
|
<VaSidebarItemTitle>Home</VaSidebarItemTitle>
|
|
</VaSidebarItemContent>
|
|
</VaSidebarItem>
|
|
<VaSidebarItem
|
|
v-if="slugs?.huntSlug"
|
|
:to="$localePath(`/hunt/${sluggy(slugs.huntSlug)}`)"
|
|
:active="
|
|
$localePath(`/hunt/${sluggy(slugs.huntSlug)}`) === route.path
|
|
"
|
|
>
|
|
<VaSidebarItemContent>
|
|
<VaIcon name="camera_indoor" />
|
|
<VaSidebarItemTitle>{{
|
|
slugs.huntSlug.name || 'Hunt'
|
|
}}</VaSidebarItemTitle>
|
|
</VaSidebarItemContent>
|
|
</VaSidebarItem>
|
|
<VaSidebarItem
|
|
v-if="slugs?.huntSlug && slugs?.questSlug"
|
|
:to="
|
|
$localePath(
|
|
`/hunt/${sluggy(slugs.huntSlug)}/${sluggy(slugs.questSlug)}`
|
|
)
|
|
"
|
|
:active="
|
|
$localePath(
|
|
`/hunt/${sluggy(slugs.huntSlug)}/${sluggy(slugs.questSlug)}`
|
|
) === route.path
|
|
"
|
|
>
|
|
<VaSidebarItemContent>
|
|
<VaIcon name="question_mark" />
|
|
<VaSidebarItemTitle>{{
|
|
slugs.questSlug.name || 'Quest'
|
|
}}</VaSidebarItemTitle>
|
|
</VaSidebarItemContent>
|
|
</VaSidebarItem>
|
|
<VaSpacer />
|
|
<VaSidebarItem
|
|
v-if="user"
|
|
:to="$localePath('/profile')"
|
|
:active="$localePath('/profile') === route.path"
|
|
:hover-color="user.role === 'ADMIN' ? 'danger' : undefined"
|
|
:text-color="user.role === 'ADMIN' ? 'danger' : undefined"
|
|
>
|
|
<VaSidebarItemContent>
|
|
<VaIcon
|
|
:name="
|
|
user.role === 'ADMIN'
|
|
? 'admin_panel_settings'
|
|
: 'account_circle'
|
|
"
|
|
/>
|
|
<VaSidebarItemTitle>
|
|
{{ user.name }}
|
|
</VaSidebarItemTitle>
|
|
</VaSidebarItemContent>
|
|
</VaSidebarItem>
|
|
<VaSidebarItem v-if="loggedIn" @click="clear">
|
|
<VaSidebarItemContent>
|
|
<VaIcon name="logout" />
|
|
<VaSidebarItemTitle>
|
|
{{ $t('auth.logout') }}
|
|
</VaSidebarItemTitle>
|
|
</VaSidebarItemContent>
|
|
</VaSidebarItem>
|
|
<VaSidebarItem v-else :to="$localePath('/login')">
|
|
<VaSidebarItemContent>
|
|
<VaIcon name="login" />
|
|
<VaSidebarItemTitle>
|
|
{{ $t('auth.login') }}
|
|
</VaSidebarItemTitle>
|
|
</VaSidebarItemContent>
|
|
</VaSidebarItem>
|
|
<LangSwitcher />
|
|
</VaSidebar>
|
|
</template>
|
|
|
|
<template #content>
|
|
<main>
|
|
<article class="p-4">
|
|
<Suspense>
|
|
<slot />
|
|
</Suspense>
|
|
</article>
|
|
</main>
|
|
</template>
|
|
</VaLayout>
|
|
</template>
|