52 lines
1.7 KiB
Vue
52 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { usePage } from '@inertiajs/vue3';
|
|
import { computed } from 'vue';
|
|
import Menu from '@/components/ui/Menu.vue';
|
|
import MenuItem from '@/components/ui/MenuItem.vue';
|
|
import type { SharedProps } from '@/types';
|
|
|
|
const page = usePage<SharedProps>();
|
|
|
|
const current = computed(() => page.props.locale);
|
|
|
|
const currentFlag = computed(
|
|
() => page.props.locales.find((locale) => locale.code === current.value)?.flag ?? null,
|
|
);
|
|
|
|
/**
|
|
* Locale switching is handled server side by App\Http\Middleware\SetLocale,
|
|
* which reads ?lang= and stores the choice in the session. A full page visit
|
|
* keeps that behaviour intact and re-fetches the translation catalog.
|
|
*/
|
|
function switchTo(code: string): void {
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.set('lang', code);
|
|
window.location.href = url.toString();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center">
|
|
<Menu>
|
|
<template #trigger>
|
|
<button
|
|
type="button"
|
|
class="flex cursor-pointer items-center gap-2 rounded px-2 py-1 text-slate-500 uppercase hover:bg-slate-100"
|
|
>
|
|
<img v-if="currentFlag" :src="currentFlag" :alt="current" width="24" />
|
|
<span>{{ current }}</span>
|
|
</button>
|
|
</template>
|
|
|
|
<MenuItem
|
|
v-for="locale in page.props.locales"
|
|
:key="locale.code"
|
|
@select="switchTo(locale.code)"
|
|
>
|
|
<img v-if="locale.flag" :src="locale.flag" :alt="locale.code" width="24" />
|
|
<span class="uppercase">{{ locale.code }}</span>
|
|
</MenuItem>
|
|
</Menu>
|
|
</div>
|
|
</template>
|