From c15791df73574faccd0f7cf9bf59a3a26abec50f Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Fri, 22 Apr 2022 09:27:59 -0700
Subject: [PATCH] feature: add more friendly language menu

---
 pinry-spa/src/components/PHeader.vue | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/pinry-spa/src/components/PHeader.vue b/pinry-spa/src/components/PHeader.vue
index d4da5c7..a6f7b9e 100644
--- a/pinry-spa/src/components/PHeader.vue
+++ b/pinry-spa/src/components/PHeader.vue
@@ -87,6 +87,21 @@
                 custom-size="mdi-24px">
               </b-icon>
             </router-link>
+            <div
+              class="navbar-item has-dropdown is-hoverable">
+              <a class="navbar-link">
+                Language
+              </a>
+              <div class="navbar-dropdown">
+                <a
+                  v-for="locale in $i18n.availableLocales"
+                  :key="`locale-${locale}`"
+                  @click="setLocale(locale)"
+                  class="navbar-item">
+                  {{ locale }}
+                </a>
+              </div>
+            </div>
             <div class="navbar-item">
               <div class="buttons">
                 <a
@@ -109,11 +124,6 @@
                 </a>
               </div>
             </div>
-            <div class="locale-changer">
-              <select v-model="$i18n.locale" @change="setLocale($event)">
-                 <option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">{{ locale }}</option>
-              </select>
-            </div>
           </div>
         </div>
       </div>
@@ -145,8 +155,9 @@ export default {
     },
   },
   methods: {
-    setLocale(event) {
-      localStorage.setItem('localeCode', event.target.value);
+    setLocale(locale) {
+      this.$i18n.locale = locale;
+      localStorage.setItem('localeCode', locale);
     },
     toggleMenu() {
       this.active = !this.active;