feat(ui): Implement Dropdown Menu components for language switcher

- 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

src/components/LanguageSwitcher.vue

@@ -1,20 +1,50 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
+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 { locale } = useI18n()
-
-const toggleLanguage = () => {
-  locale.value = locale.value === 'en' ? 'es' : 'en'
-}
-
-const getLanguageLabel = () => {
-  return locale.value === 'en' ? '🇬🇹 ES' : '🇺🇸 EN'
-}
+const { currentLocale, locales, setLocale } = useLocale()
 </script>
 
 <template>
-  <Button variant="ghost" size="sm" @click="toggleLanguage" class="gap-1">
-    {{ getLanguageLabel() }}
-  </Button>
+  <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>