WIP: Change position and design of LanguageForm

aleksis/core/static/js/vue/components/core/LanguageForm.js

 export default {
     data: () => ({
         items: JSON.parse(document.getElementById("language-info-list").textContent),
-        current_language: JSON.parse(document.getElementById("language-info-list").textContent).find(t=>t.code === JSON.parse(document.getElementById("current-language").textContent)).name_local,
+        current_language: JSON.parse(document.getElementById("language-info-list").textContent).find(t=>t.code === JSON.parse(document.getElementById("current-language").textContent)).code,
     }),
     methods: {
-        submit: function () {
+        submit: function (language) {
+            console.log(this.$refs.form.data)
+            this.$refs.form.language = language
             this.$refs.form.submit()
         },
     },
@@ -25,14 +27,28 @@ export default {
       type="hidden"
     ></v-text-field>
     <!-- fixme: language value is not passed -->
-    <v-select
+    <!--<v-select
       name="language"
+      dense
+      outlined
+      dark
+      hide-details="auto"
+      prepend-inner-icon="mdi-translate"
       :items="items"
       item-text="name_local"
       item-value="code"
       :label="current_language"
-      color="white"
       @input="submit"
-    ></v-select>
+    ></v-select>-->
+    <v-menu offset-y>
+      <template v-slot:activator="{ on, attrs }">
+        <v-icon icon v-bind="attrs" v-on="on" color="white">mdi-translate</v-icon>
+      </template>
+      <v-list id="language-dropdown" class="dropdown-content">
+          <v-list-item v-for="language in items" @click="submit(language.code)">
+            <v-list-item-title>{{ language.name_local }}</v-list-item-title>
+          </v-list-item>
+      </v-list>
+    </v-menu>
   </form>`
 }

aleksis/core/templates/core/vue_base.html

@@ -103,6 +103,7 @@
 
 
       <v-spacer></v-spacer>
+      <language-form action="{% url "set_language" %}" csrf_value={{ csrf_token }} next_url={{ request.get_full_path }}></language-form>
       {% if user.is_authenticated %}
         <v-tooltip bottom>
           <template v-slot:activator="{ on, attrs }">
@@ -172,9 +173,6 @@
     <v-footer app absolute inset color="primary" class="white--text">
       <v-container>
         <v-row>
-          <v-col cols="12" lg="6">
-            <language-form action="{% url "set_language" %}" csrf_value={{ csrf_token }} next_url={{ request.get_full_path }}></language-form>
-          </v-col>
           <v-col cols="12" lg="6">
             {% include "core/partials/vue_footer_menu.html" %}
           </v-col>