From b264e397d8ffeccb8507efeb65ecdef877f6486f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Fri, 2 Apr 2021 15:29:27 +0000
Subject: [PATCH] add language picker.

---
 README.md                      |  1 +
 client/src/components/menu.vue | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/README.md b/README.md
index 31ed619c..40410f40 100644
--- a/README.md
+++ b/README.md
@@ -37,6 +37,7 @@ For n.eko room management software visit https://github.com/m1k1o/neko-rooms.
 - Added `m1k1o/neko:vlc` tag, use VLC to watch local files together (by @mbattista).
 - Added `m1k1o/neko:xfce` tag, as an non video related showcase (by @mbattista).
 - Added ARM-based images, for Raspberry Pi support (by @mbattista).
+- Added simple language picker.
 
 ### Bugs
 - Fixed minor gst pipeline bug.
diff --git a/client/src/components/menu.vue b/client/src/components/menu.vue
index 1feca067..a3bab274 100644
--- a/client/src/components/menu.vue
+++ b/client/src/components/menu.vue
@@ -13,6 +13,13 @@
         v-if="admin"
       />
     </li>
+    <li>
+      <select v-model="$i18n.locale">
+        <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">
+          {{ lang }}
+        </option>
+      </select>
+    </li>
   </ul>
 </template>
 
@@ -28,10 +35,33 @@
       }
     }
   }
+
+  select {
+    appearance: none;
+    background-color: $background-tertiary;
+    border: 1px solid $background-primary;
+    color: white;
+    cursor: pointer;
+    border-radius: 5px;
+    height: 24px;
+    vertical-align: text-bottom;
+    display: inline-block;
+
+    option {
+      font-weight: normal;
+      color: $text-normal;
+      background-color: $background-tertiary;
+    }
+
+    &:hover {
+      border: 1px solid $background-primary;
+    }
+  }
 </style>
 
 <script lang="ts">
   import { Component, Ref, Watch, Vue } from 'vue-property-decorator'
+  import { messages } from '~/locale'
 
   @Component({ name: 'neko-menu' })
   export default class extends Vue {
@@ -39,6 +69,10 @@
       return this.$accessor.user.admin
     }
 
+    get langs() {
+      return Object.keys(messages)
+    }
+
     about() {
       this.$accessor.client.toggleAbout()
     }