35 lines
1022 B
Vue
35 lines
1022 B
Vue
<script setup lang="ts">
|
|
const { locale, locales } = useI18n();
|
|
const switchLocalePath = useSwitchLocalePath();
|
|
|
|
const availableLocales = computed(() => {
|
|
return locales.value.filter((i) => l(i) !== locale.value);
|
|
});
|
|
|
|
const { loggedIn, clear, user } = useUserSession();
|
|
const localePath = useLocalePath();
|
|
function l(locale: (typeof locales.value)[0]) {
|
|
return typeof locale === 'string' ? locale : locale.code;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="m-2 flex flex-row gap-4 underline">
|
|
<NuxtLink
|
|
v-for="loc in availableLocales"
|
|
:key="l(loc)"
|
|
:to="switchLocalePath(l(loc))"
|
|
:title="$t('layouts.switch_lang', { locale: $t(`locales.${l(loc)}`) })"
|
|
>{{ $t(`locales.${l(loc)}`) }}
|
|
</NuxtLink>
|
|
<a v-if="loggedIn" href="#" @click.prevent="clear">Logout</a>
|
|
<NuxtLink v-else :to="localePath('/login')">Login</NuxtLink>
|
|
<NuxtLink :to="localePath('/')">Home</NuxtLink>
|
|
</div>
|
|
<Suspense>
|
|
<slot />
|
|
</Suspense>
|
|
</div>
|
|
</template>
|