fix: locale dropdown should be based on available locales

src/components/Header.vue

@@ -3,8 +3,8 @@
     <div>
       <b-container>
         <b-navbar toggleable="lg" type="dark" class="tw-text-white tw-flex">
-          <span class="sr-only menu-context-info">{{ $t('header.showMoreDesktop') }}:</span>
-          <span class="sr-only menu-context-info">{{ $t('header.showMoreMobile') }}: </span>
+          <span class="sr-only menu-context-info">{{ t('header.showMoreDesktop') }}:</span>
+          <span class="sr-only menu-context-info">{{ t('header.showMoreMobile') }}: </span>
 
           <b-navbar-toggle target="nav_collapse" />
           <b-collapse id="nav_collapse" is-nav class="tw-flex tw-items-center tw-justify-between">
@@ -24,13 +24,14 @@
             </b-navbar-nav>
 
             <b-navbar-nav class="tw-flex tw-items-center">
-              <b-nav-item-dropdown :text="$activeLocale().toUpperCase()" right>
-                <b-dropdown-item :active="$activeLocale() === 'de'" @click="$locale('de')">
-                  DE
-                </b-dropdown-item>
-
-                <b-dropdown-item :active="$activeLocale() === 'en'" @click="$locale('en')">
-                  EN
+              <b-nav-item-dropdown :text="locale.toUpperCase()" right>
+                <b-dropdown-item
+                  v-for="availableLocale in availableLocales"
+                  :key="availableLocale"
+                  :active="availableLocale === locale"
+                  @click="locale = availableLocale"
+                >
+                  {{ availableLocale.toUpperCase() }}
                 </b-dropdown-item>
               </b-nav-item-dropdown>
               <b-nav-item-dropdown v-if="user.logged_in" right>
@@ -39,13 +40,13 @@
                   <em>{{ user.name }}</em>
                 </template>
                 <b-dropdown-item to="settings">
-                  {{ $t('navigation.settings') }}
+                  {{ t('navigation.settings') }}
                 </b-dropdown-item>
                 <b-dropdown-item href="#">
-                  {{ $t('navigation.profile') }}
+                  {{ t('navigation.profile') }}
                 </b-dropdown-item>
                 <b-dropdown-item @click="signOut">
-                  {{ $t('auth.signOut') }}
+                  {{ t('auth.signOut') }}
                 </b-dropdown-item>
               </b-nav-item-dropdown>
 
@@ -69,17 +70,19 @@
   </header>
 </template>
 
-<script>
-export default {
-  props: {
-    modules: { type: Object, required: true },
-    user: { type: Object, required: true },
-  },
-  methods: {
-    signOut() {
-      this.$store.dispatch('auth/signoutRedirect')
-    },
-  },
+<script setup>
+import { useStore } from 'vuex'
+import { useI18n } from '@/i18n'
+
+defineProps({
+  modules: { type: Object, required: true },
+  user: { type: Object, required: true },
+})
+const store = useStore()
+const { t, locale, availableLocales } = useI18n()
+
+function signOut() {
+  store.dispatch('auth/signoutRedirect')
 }
 </script>