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/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>