55 lines
1.7 KiB
Vue
55 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { SidebarInset, SidebarTrigger } from '@/components/ui/sidebar'
|
|
import { locales, setLocale } from '@/services/i18n'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
const route = useRoute()
|
|
const { locale: currentLocale } = useI18n()
|
|
|
|
const selectedLangFlag = computed(
|
|
() => locales.find((l) => l.lang === currentLocale.value)?.flag ?? locales[0].flag,
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<SidebarInset>
|
|
<header class="flex h-14 shrink-0 items-center gap-2 border-b px-4">
|
|
<SidebarTrigger class="-ml-1" />
|
|
<Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
|
|
<h1 class="font-medium">{{ route.meta.title ? $t(route.meta.title) : '' }}</h1>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<Button variant="ghost" size="icon" class="ml-auto">
|
|
<span :class="'fi fi-' + selectedLangFlag"></span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" class="min-w-0">
|
|
<DropdownMenuItem
|
|
v-for="locale in locales"
|
|
:key="locale.lang"
|
|
class="justify-center"
|
|
@click="setLocale(locale.lang)"
|
|
>
|
|
<span :class="'fi fi-' + locale.flag"></span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</header>
|
|
|
|
<div class="flex-1 p-4 md:p-6">
|
|
<RouterView />
|
|
</div>
|
|
</SidebarInset>
|
|
</template>
|