add language picker.

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()
     }