From 305479455887fd9ad96e7fce9479943891a50518 Mon Sep 17 00:00:00 2001
From: Denis Lugowski <denis.lugowski@gmail.com>
Date: Sat, 10 Jan 2026 09:22:47 +0100
Subject: [PATCH] feat(landing): Change language switcher

---
 landing/app/app.vue          | 42 ++++++++++++++++++------------------
 landing/i18n/locales/de.json |  1 +
 landing/i18n/locales/en.json |  1 +
 3 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/landing/app/app.vue b/landing/app/app.vue
index c60eaee..70693aa 100644
--- a/landing/app/app.vue
+++ b/landing/app/app.vue
@@ -40,14 +40,22 @@
       />
 
       <template #right>
-        <USelectMenu
-          v-model="selectedLocale"
-          :items="localeItems"
-          class="w-[90px] sm:w-[100px]"
-          :ui="{
-            base: 'text-sm'
+        <UDropdownMenu
+          :items="localeMenuItems"
+          :modal="false"
+          :ui="{ content: 'min-w-32' }"
+          :content="{
+            align: 'end'
           }"
-        />
+        >
+          <UButton
+            icon="i-lucide-globe"
+            color="neutral"
+            variant="ghost"
+            :aria-label="$t('common.changeLanguage')"
+            class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400"
+          />
+        </UDropdownMenu>
         <UColorModeButton
           :ui="{
             base: 'text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400'
@@ -176,28 +184,20 @@
 </template>
 
 <script setup lang="ts">
-import type { NavigationMenuItem } from '@nuxt/ui'
+import type { NavigationMenuItem, DropdownMenuItem } from '@nuxt/ui'
 
 const { t, locale, locales, setLocale } = useI18n()
 
-// Locale selector items
-const localeItems = computed(() =>
+// Locale dropdown menu items
+const localeMenuItems = computed<DropdownMenuItem[]>(() =>
   (locales.value as Array<{ code: string; name: string }>).map((l) => ({
     label: l.name,
-    value: l.code
+    icon: locale.value === l.code ? 'i-lucide-check' : undefined,
+    active: locale.value === l.code,
+    onSelect: () => setLocale(l.code as 'en' | 'de')
   }))
 )
 
-// Selected locale for the dropdown
-const selectedLocale = computed({
-  get: () => localeItems.value.find((l) => l.value === locale.value),
-  set: (item) => {
-    if (item) {
-      setLocale(item.value as 'en' | 'de')
-    }
-  }
-})
-
 // Track scroll position for header styling
 const isScrolled = ref(false)
 
diff --git a/landing/i18n/locales/de.json b/landing/i18n/locales/de.json
index 8259734..0299576 100644
--- a/landing/i18n/locales/de.json
+++ b/landing/i18n/locales/de.json
@@ -6,6 +6,7 @@
   },
   "common": {
     "skipToContent": "Zum Hauptinhalt springen",
+    "changeLanguage": "Sprache ändern",
     "stayInformed": "Informiert bleiben",
     "learnMore": "Mehr erfahren",
     "contact": "Kontakt aufnehmen",
diff --git a/landing/i18n/locales/en.json b/landing/i18n/locales/en.json
index 150d602..9911a09 100644
--- a/landing/i18n/locales/en.json
+++ b/landing/i18n/locales/en.json
@@ -6,6 +6,7 @@
   },
   "common": {
     "skipToContent": "Skip to main content",
+    "changeLanguage": "Change language",
     "stayInformed": "Stay informed",
     "learnMore": "Learn more",
     "contact": "Contact us",