Redesign language select and move it to sidenav

aleksis/core/assets/App.vue

@@ -59,6 +59,12 @@
             </v-list-item>
           </div>
         </v-list>
+
+        <template v-slot:append>
+          <div class="pa-2">
+            <language-form :available-languages="systemProperties.availableLanguages" />
+          </div>
+        </template>
       </v-navigation-drawer>
       <v-app-bar app color="primary white--text">
         <v-app-bar-nav-icon
@@ -74,7 +80,6 @@
         </v-toolbar-title>
 
         <v-spacer/>
-        <language-form/>
         <div v-if="currentUser.isAuthenticated" class="d-flex">
           <notification-list/>
           <v-menu offset-y>

aleksis/core/assets/components/LanguageForm.vue

 <template>
-  <v-menu offset-y>
-    <template #activator="{ on, attrs }">
-      <v-btn depressed v-bind="attrs" v-on="on" color="primary">
-        <v-icon icon color="white">mdi-translate</v-icon>
-        {{ $i18n.locale }}
-      </v-btn>
-    </template>
-    <v-list id="language-dropdown" class="dropdown-content" min-width="150">
-      <v-skeleton-loader
-        v-if="!$root.systemProperties.availableLanguages"
-        class="mx-auto"
-        type="list-item, list-item, list-item"
-      ></v-skeleton-loader>
-      <v-list-item-group
-        v-if="$root.systemProperties.availableLanguages"
-        v-model="$i18n.locale"
-        color="primary"
-      >
-        <v-list-item
-          v-for="languageOption in $root.systemProperties.availableLanguages"
-          :key="languageOption.code"
-          :value="languageOption.code"
-          @click="setLanguage(languageOption)"
-        >
-          <v-list-item-title>{{
-            languageOption.nameTranslated
-          }}</v-list-item-title>
-        </v-list-item>
-      </v-list-item-group>
-    </v-list>
-  </v-menu>
+  <v-select
+    v-if="availableLanguages"
+    v-model="language"
+    :items="availableLanguages"
+    item-text="nameTranslated"
+    item-value="code"
+    menu-props="auto"
+    outlined
+    prepend-icon="mdi-translate"
+    color="primary"
+    single-line
+    return-object
+    @input="setLanguage(language)"
+  ></v-select>
 </template>
 
 <script>
@@ -39,6 +22,12 @@ export default {
       language: this.$i18n.locale,
     };
   },
+  props: {
+    availableLanguages: {
+      type: Array,
+      required: true,
+    },
+  },
   methods: {
     setLanguage: function (languageOption) {
       document.cookie = languageOption.cookie;