81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
const { loggedIn, clear } = useUserSession();
|
|
|
|
const route = useRoute();
|
|
const breakpoints = useBreakpoint();
|
|
|
|
const isSidebarVisible = ref(breakpoints.mdUp);
|
|
|
|
watchEffect(() => {
|
|
isSidebarVisible.value = breakpoints.smUp;
|
|
});
|
|
</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>{{ $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>
|
|
<VaSpacer />
|
|
<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>
|