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>

src/components/layout/Navbar.vue

@@ -5,13 +5,19 @@ import { useTheme } from '@/components/theme-provider'
 import { useRouter } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { Zap, Sun, Moon, Menu, X } from 'lucide-vue-next'
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
 
-const { t, locale } = useI18n()
+interface NavigationItem {
+  name: string
+  href: string
+}
+
+const { t } = useI18n()
 const { theme, setTheme } = useTheme()
 const router = useRouter()
 const isOpen = ref(false)
 
-const navigation = computed(() => [
+const navigation = computed<NavigationItem[]>(() => [
   { name: t('nav.home'), href: '/' },
   { name: t('nav.support'), href: '/support' },
 ])
@@ -23,14 +29,6 @@ const toggleMenu = () => {
 const toggleTheme = () => {
   setTheme(theme.value === 'dark' ? 'light' : 'dark')
 }
-
-const toggleLocale = () => {
-  // Toggle between 'en' and 'es'
-  const newLocale = locale.value === 'en' ? 'es' : 'en'
-  locale.value = newLocale
-  // Store the preference
-  localStorage.setItem('locale', newLocale)
-}
 </script>
 
 <template>
@@ -49,7 +47,6 @@ const toggleLocale = () => {
             class="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2" :class="{
               'text-foreground': $route.path === item.href
             }">
-            <component v-if="item.icon" :is="item.icon" class="h-4 w-4" />
             {{ item.name }}
           </router-link>
         </div>
@@ -63,12 +60,10 @@ const toggleLocale = () => {
           <Moon v-else class="h-5 w-5" />
         </Button>
 
-        <!-- Hide language toggle on mobile -->
-        <Button variant="ghost"
-          class="text-muted-foreground hover:text-foreground transition-colors hidden sm:inline-flex"
-          @click="toggleLocale">
-          {{ locale === 'en' ? '🇪🇸 ES' : '🇺🇸 EN' }}
-        </Button>
+        <!-- Hide language switcher on mobile -->
+        <div class="hidden sm:block">
+          <LanguageSwitcher />
+        </div>
 
         <!-- Mobile menu button -->
         <Button variant="ghost" size="icon" class="md:hidden" @click="toggleMenu">
@@ -90,10 +85,7 @@ const toggleLocale = () => {
             <Sun v-if="theme === 'dark'" class="h-5 w-5" />
             <Moon v-else class="h-5 w-5" />
           </Button>
-          <Button variant="ghost" class="text-muted-foreground hover:text-foreground transition-colors"
-            @click="toggleLocale">
-            {{ locale === 'en' ? '🇪🇸 ES' : '🇺🇸 EN' }}
-          </Button>
+          <LanguageSwitcher />
         </div>
 
         <router-link v-for="item in navigation" :key="item.name" :to="item.href"
@@ -101,17 +93,9 @@ const toggleLocale = () => {
           :class="{
             'text-foreground': $route.path === item.href
           }" @click="isOpen = false">
-          <component v-if="item.icon" :is="item.icon" class="h-4 w-4" />
           {{ item.name }}
         </router-link>
       </div>
     </div>
   </nav>
-
-  <!-- Login Dialog -->
-  <Dialog v-model:open="showLoginDialog">
-    <DialogContent class="sm:max-w-md">
-      <Login @success="showLoginDialog = false" />
-    </DialogContent>
-  </Dialog>
 </template>

src/components/ui/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { DropdownMenuRoot } from 'radix-vue'
+
+defineOptions({
+  name: 'DropdownMenu'
+})
+
+defineSlots<{
+  default?: (props: {}) => any
+}>()
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="$attrs">
+    <slot />
+  </DropdownMenuRoot>
+</template> 

src/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { DropdownMenuContent, type DropdownMenuContentProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+defineOptions({
+  name: 'DropdownMenuContent'
+})
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & {
+    class?: string
+  }>(),
+  {
+    sideOffset: 4,
+    align: 'start',
+    class: ''
+  }
+)
+</script>
+
+<template>
+  <DropdownMenuContent
+    :class="cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      props.class
+    )"
+    v-bind="{ ...props, ...$attrs }"
+  >
+    <slot />
+  </DropdownMenuContent>
+</template> 

src/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { DropdownMenuItem, type DropdownMenuItemProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+defineOptions({
+  name: 'DropdownMenuItem'
+})
+
+const props = withDefaults(
+  defineProps<
+    DropdownMenuItemProps & {
+      class?: string
+      inset?: boolean
+    }
+  >(),
+  {
+    class: '',
+    inset: false
+  }
+)
+</script>
+
+<template>
+  <DropdownMenuItem
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class
+    )"
+    v-bind="{ ...props, ...$attrs }"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template> 

src/components/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { DropdownMenuTrigger } from 'radix-vue'
+
+defineOptions({
+  name: 'DropdownMenuTrigger'
+})
+
+const props = withDefaults(
+  defineProps<{
+    asChild?: boolean
+  }>(),
+  {
+    asChild: false
+  }
+)
+</script>
+
+<template>
+  <DropdownMenuTrigger v-bind="{ ...props, ...$attrs }">
+    <slot />
+  </DropdownMenuTrigger>
+</template> 

src/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,4 @@
+export { default as DropdownMenu } from './DropdownMenu.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'