added LocaleSelector.vue

src/components/NavBar.vue

@@ -2,12 +2,14 @@
 import {Options, Vue} from 'vue-class-component';
 import BootstrapThemeSwitch from '@/components/bootstrapThemeSwitch/BootstrapThemeSwitch.vue';
 import UserSearch from '@/components/UserSearch.vue';
+import LocaleSelector from '@/components/locale/LocaleSelector.vue';
 
 @Options({
   name: 'NavBar',
   components: {
     UserSearch,
     BootstrapThemeSwitch,
+    LocaleSelector,
   },
 })
 export default class NavBar extends Vue {
@@ -52,7 +54,10 @@ export default class NavBar extends Vue {
           <UserSearch/>
         </div>
         <div>
-          <BootstrapThemeSwitch/>
+          <div class="d-flex flex-row align-items-center">
+            <LocaleSelector class="ms-2"/>
+            <BootstrapThemeSwitch class="ms-2"/>
+          </div>
         </div>
       </div>
     </div>

src/components/locale/LocaleSelector.vue

@@ -0,0 +1,37 @@
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+
+@Options({name: 'LocaleSelector'})
+export default class LocaleSelector extends Vue {
+  get locale(): string {
+    return this.$i18n.locale;
+  }
+
+  set locale(value: string) {
+    this.$i18n.locale = value;
+  }
+
+  get supportedLocales(): { value: string, text: string } [] {
+    return [
+      {value: 'en', text: this.$t('locale.en')},
+      {value: 'de', text: this.$t('locale.de')},
+    ];
+  }
+}
+</script>
+
+<template>
+  <div class="dropdown">
+    <button aria-expanded="false" class="btn btn-sm btn-outline-secondary" data-bs-toggle="dropdown" type="button">
+      <i class="fa fa-language"/>
+    </button>
+    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
+      <li v-for="l in supportedLocales" :key="l.value">
+        <a :class="{active: locale === l.value}" class="dropdown-item" href="#"
+           @click.prevent="locale = l.value">
+          {{ l.text }}
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>

src/locale/de.ts

@@ -1,4 +1,6 @@
+
 export const messagesDe = {
+  locale: messagesEn.locale,
   manga: {
     progress: 'Fortschritt',
     score: 'Bewertung',

src/locale/en.ts

@@ -1,4 +1,8 @@
 export const messagesEn = {
+  locale: {
+    'de': 'Deutsch',
+    'en': 'English',
+  },
   manga: {
     progress: 'Progress',
     score: 'Score',