Adding button to change languages

Including examples using localePath and $t

frontend/components/containers/documents/DocumentList.vue

@@ -137,7 +137,7 @@ export default {
       const offset = (this.options.page - 1) * this.options.itemsPerPage
       const page = offset + index + 1
       this.$router.push({
-        path: `/projects/${this.$route.params.id}/${this.getLink}`,
+        path: this.localePath(`/projects/${this.$route.params.id}/${this.getLink}`),
         query: {
           page,
           q: this.search

frontend/components/organisms/layout/TheHeader.vue

@@ -29,6 +29,33 @@
     </v-btn>
     <div class="flex-grow-1" />
     <the-color-mode-switcher />
+    <v-menu
+      open-on-hover
+      offset-y
+    >
+      <template v-slot:activator="{ on }">
+        <v-btn
+          text
+          v-on="on"
+        >
+          {{ $i18n.locale }}
+          <v-icon>mdi-menu-down</v-icon>
+        </v-btn>
+      </template>
+      <v-list
+        v-for="locale in $i18n.locales"
+        :key="locale.code"
+      >
+        <v-list-item>
+          <nuxt-link
+            style="text-decoration: none; color: inherit;"
+            :to="switchLocalePath(locale.code)"
+          >
+            {{ locale.name }}
+          </nuxt-link>
+        </v-list-item>
+      </v-list>
+    </v-menu>
     <v-btn
       v-if="isAuthenticated"
       text

frontend/pages/projects/_id/index.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card>
     <v-card-title>
-      Welcome to doccano!
+      {{ $t('home.welcome') }}
     </v-card-title>
     <v-stepper
       v-model="e6"