padreug
ecc85ba98b
- Add DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, and DropdownMenuItem components - Refactor LanguageSwitcher to use new Dropdown Menu components - Update Navbar to use LanguageSwitcher component with improved language selection UI - Remove legacy language toggle logic from Navbar
50 lines
1.4 KiB
Vue
50 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Check } from 'lucide-vue-next'
|
|
import { useLocale } from '@/composables/useLocale'
|
|
|
|
const { currentLocale, locales, setLocale } = useLocale()
|
|
</script>
|
|
|
|
<template>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<Button variant="ghost" size="sm" class="gap-2 w-[120px] justify-start">
|
|
<span v-for="locale in locales" :key="locale.code">
|
|
{{ locale.code === currentLocale ? locale.flag : '' }}
|
|
</span>
|
|
<span v-for="locale in locales" :key="locale.code">
|
|
{{ locale.code === currentLocale ? locale.name : '' }}
|
|
</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" class="w-[120px]">
|
|
<DropdownMenuItem
|
|
v-for="locale in locales"
|
|
:key="locale.code"
|
|
@click="setLocale(locale.code)"
|
|
class="gap-2"
|
|
>
|
|
<Check
|
|
class="h-4 w-4"
|
|
:class="{ 'opacity-0': locale.code !== currentLocale }"
|
|
/>
|
|
<span class="mr-2">{{ locale.flag }}</span>
|
|
{{ locale.name }}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dropdown-menu-content {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|