46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div class="relative">
|
||
|
|
<button
|
||
|
|
@click="isOpen = !isOpen"
|
||
|
|
class="flex items-center space-x-1 px-3 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 focus:outline-none"
|
||
|
|
>
|
||
|
|
<span>{{ currentLocale?.name }}</span>
|
||
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div
|
||
|
|
v-if="isOpen"
|
||
|
|
class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
v-for="locale in availableLocales"
|
||
|
|
:key="locale.code"
|
||
|
|
@click="switchLanguage(locale.code)"
|
||
|
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
|
||
|
|
>
|
||
|
|
{{ locale.name }}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
const { locale, locales } = useI18n()
|
||
|
|
const switchLocalePath = useSwitchLocalePath()
|
||
|
|
|
||
|
|
const isOpen = ref(false)
|
||
|
|
const availableLocales = locales.value
|
||
|
|
const currentLocale = computed(() =>
|
||
|
|
availableLocales.find(l => l.code === locale.value)
|
||
|
|
)
|
||
|
|
|
||
|
|
const switchLanguage = async (newLocale) => {
|
||
|
|
await navigateTo(switchLocalePath(newLocale))
|
||
|
|
isOpen.value = false
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|