From b35ac308563376b279510d23f4c08a0bb3f33cd4 Mon Sep 17 00:00:00 2001
From: wea_ondara <wea_ondara@cutiepie.at>
Date: Tue, 26 Sep 2023 16:35:23 +0200
Subject: [PATCH] added LocaleSelector.vue

---
 src/components/NavBar.vue                |  7 ++++-
 src/components/locale/LocaleSelector.vue | 37 ++++++++++++++++++++++++
 src/locale/de.ts                         |  2 ++
 src/locale/en.ts                         |  4 +++
 4 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/components/locale/LocaleSelector.vue

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 023c45f..68c9fa7 100644
--- a/src/components/NavBar.vue
+++ b/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>
diff --git a/src/components/locale/LocaleSelector.vue b/src/components/locale/LocaleSelector.vue
new file mode 100644
index 0000000..01cd998
--- /dev/null
+++ b/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>
diff --git a/src/locale/de.ts b/src/locale/de.ts
index 4c4092a..b162992 100644
--- a/src/locale/de.ts
+++ b/src/locale/de.ts
@@ -1,4 +1,6 @@
+
 export const messagesDe = {
+  locale: messagesEn.locale,
   manga: {
     progress: 'Fortschritt',
     score: 'Bewertung',
diff --git a/src/locale/en.ts b/src/locale/en.ts
index 4affa67..99d1601 100644
--- a/src/locale/en.ts
+++ b/src/locale/en.ts
@@ -1,4 +1,8 @@
 export const messagesEn = {
+  locale: {
+    'de': 'Deutsch',
+    'en': 'English',
+  },
   manga: {
     progress: 'Progress',
     score: 'Score',