unify style for language selectro

frontend/src/components/Admin/General/HomePageSettings.vue

@@ -119,8 +119,8 @@
     <v-card-text>
       <h2 class="mt-1 mb-4">{{ $t("settings.locale-settings") }}</h2>
       <v-row>
-        <v-col cols="1">
-          <LanguageMenu @select-lang="writeLang" :site-settings="true" />
+        <v-col cols="3">
+          <LanguageSelector @select-lang="writeLang" :site-settings="true" />
         </v-col>
         <v-col sm="3">
           <v-select
@@ -147,14 +147,14 @@
 
 <script>
 import { api } from "@/api";
-import LanguageMenu from "@/components/UI/LanguageMenu";
+import LanguageSelector from "@/components/FormHelpers/LanguageSelector";
 import draggable from "vuedraggable";
 import NewCategoryTagDialog from "@/components/UI/Dialogs/NewCategoryTagDialog.vue";
 
 export default {
   components: {
     draggable,
-    LanguageMenu,
+    LanguageSelector,
     NewCategoryTagDialog,
   },
   data() {

frontend/src/components/FormHelpers/LanguageSelector.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-select
+    dense
+    :items="allLanguages"
+    item-text="name"
+    :label="$t('settings.language')"
+    prepend-icon="mdi-translate"
+    :value="selectedItem"
+    @input="setLanguage"
+  >
+  </v-select>
+</template>
+
+<script>
+const SELECT_EVENT = "select-lang";
+export default {
+  props: {
+    siteSettings: {
+      default: false,
+    },
+  },
+  data: function() {
+    return {
+      selectedItem: 0,
+      items: [
+        {
+          name: "English",
+          value: "en-US",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.selectedItem = this.$store.getters.getActiveLang;
+  },
+  computed: {
+    allLanguages() {
+      return this.$store.getters.getAllLangs;
+    },
+  },
+
+  methods: {
+    setLanguage(selectedLanguage) {
+      this.$emit(SELECT_EVENT, selectedLanguage);
+    },
+  },
+};
+</script>

frontend/src/components/UI/LanguageMenu.vue

@@ -1,81 +0,0 @@
-<template>
-  <div class="text-center">
-    <v-menu
-      transition="slide-x-transition"
-      bottom
-      right
-      offset-y
-      close-delay="200"
-    >
-      <template v-slot:activator="{ on, attrs }">
-        <v-btn v-bind="attrs" v-on="on" icon>
-          <v-icon>mdi-translate</v-icon>
-        </v-btn>
-      </template>
-
-      <v-list>
-        <v-list-item-group v-model="selectedItem" color="primary">
-          <v-list-item
-            v-for="(item, i) in allLanguages"
-            :key="i"
-            link
-            @click="setLanguage(item.value)"
-          >
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ item.name }}
-              </v-list-item-title>
-            </v-list-item-content>
-          </v-list-item>
-        </v-list-item-group>
-      </v-list>
-    </v-menu>
-  </div>
-</template>
-
-<script>
-const SELECT_EVENT = "select-lang";
-export default {
-  props: {
-    siteSettings: {
-      default: false,
-    },
-  },
-  data: function() {
-    return {
-      selectedItem: 0,
-      items: [
-        {
-          name: "English",
-          value: "en-US",
-        },
-      ],
-    };
-  },
-  mounted() {
-    let active = this.$store.getters.getActiveLang;
-    this.allLanguages.forEach((element, index) => {
-      if (element.value === active) {
-        this.selectedItem = index;
-        return;
-      }
-    });
-  },
-  computed: {
-    allLanguages() {
-      return this.$store.getters.getAllLangs;
-    },
-  },
-
-  methods: {
-    setLanguage(selectedLanguage) {
-      this.$emit(SELECT_EVENT, selectedLanguage);
-    },
-  },
-};
-</script>
-<style>
-.menu-text {
-  text-align: left !important;
-}
-</style>

frontend/src/routes/index.js

@@ -42,7 +42,6 @@ router.afterEach(to => {
 });
 
 function loadLocale() {
-  console.log("Router Lang", store.getters.getActiveLang);
   VueI18n.locale = store.getters.getActiveLang;
   Vuetify.framework.lang.current = store.getters.getActiveLang;
 }

frontend/src/store/modules/language.js

@@ -1,3 +1,4 @@
+// This is the data store for the options for language selection. Property is reference only, you cannot set this property.
 const state = {
   allLangs: [
     {