modified translation drop-down

Author: André Dietrich

src/components/LanguageDropdown.vue

@@ -1,4 +1,34 @@
 <script lang="ts">
+const localeNames: Record<string, string> = {
+  en: 'English',
+  de: 'Deutsch',
+  uk: 'Українська',
+  es: 'Español',
+  fr: 'Français',
+  zh: '中文（简体）',
+  ja: '日本語',
+  ko: '한국어',
+  ar: 'العربية',
+  pt: 'Português',
+  bg: 'Български',
+  cs: 'Čeština',
+  da: 'Dansk',
+  el: 'Ελληνικά',
+  hu: 'Magyar',
+  it: 'Italiano',
+  nl: 'Nederlands',
+  pl: 'Polski',
+  sv: 'Svenska',
+  tr: 'Türkçe',
+  sw: 'Kiswahili',
+  ha: 'Hausa',
+  am: 'አማርኛ',
+  yo: 'Yorùbá',
+  om: 'Afaan Oromoo',
+  ff: 'Fulfulde',
+  ig: 'Igbo',
+}
+
 export default {
   name: 'LanguageDropdown',
 
@@ -13,6 +43,11 @@ export default {
       this.open = false;
     },
 
+    localeLabel(locale: string) {
+      const code = locale.toUpperCase();
+      return `${code} - ${localeNames[locale] ?? code}`;
+    },
+
     onOutsideClick(e: MouseEvent) {
       if (!(this.$el as HTMLElement).contains(e.target as Node)) {
         this.open = false;
@@ -48,7 +83,7 @@ export default {
           class="dropdown-item"
           :class="{ active: $i18n.locale === locale }"
           @click="changeLocale(locale)"
-        >{{ locale.toUpperCase() }}</button>
+        >{{ localeLabel(locale) }}</button>
       </li>
     </ul>
   </div>