From bec857120fcabfa8950914abf2028133393509c1 Mon Sep 17 00:00:00 2001
From: Collin Brown <collinbrown95@gmail.com>
Date: Wed, 16 Sep 2020 17:48:58 -0400
Subject: [PATCH] Moving locale button into its own component Fixing a
 translation error

---
 .../annotation/MultiClassClassification.vue   |  2 +-
 .../organisms/layout/LocaleMenu.vue           | 31 +++++++++++++++++++
 .../components/organisms/layout/TheHeader.vue | 30 +++---------------
 3 files changed, 36 insertions(+), 27 deletions(-)
 create mode 100644 frontend/components/organisms/layout/LocaleMenu.vue

diff --git a/frontend/components/organisms/annotation/MultiClassClassification.vue b/frontend/components/organisms/annotation/MultiClassClassification.vue
index 41946060..b18ab634 100644
--- a/frontend/components/organisms/annotation/MultiClassClassification.vue
+++ b/frontend/components/organisms/annotation/MultiClassClassification.vue
@@ -3,7 +3,7 @@
     v-model="annotatedLabels"
     :items="labels"
     item-text="text"
-    :label="$t('label.label')"
+    :label="$t('labels.labels')"
     hide-selected
     chips
     multiple
diff --git a/frontend/components/organisms/layout/LocaleMenu.vue b/frontend/components/organisms/layout/LocaleMenu.vue
new file mode 100644
index 00000000..23c19290
--- /dev/null
+++ b/frontend/components/organisms/layout/LocaleMenu.vue
@@ -0,0 +1,31 @@
+<template>
+  <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"
+    >
+      <nuxt-link
+        class="v-list-item v-list-item--link theme--dark"
+        :to="switchLocalePath(locale.code)"
+      >
+        {{ locale.name }}
+      </nuxt-link>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+export default {}
+</script>
diff --git a/frontend/components/organisms/layout/TheHeader.vue b/frontend/components/organisms/layout/TheHeader.vue
index 07a9e99d..35375379 100644
--- a/frontend/components/organisms/layout/TheHeader.vue
+++ b/frontend/components/organisms/layout/TheHeader.vue
@@ -29,31 +29,7 @@
     </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"
-      >
-        <nuxt-link
-          class="v-list-item v-list-item--link theme--dark"
-          :to="switchLocalePath(locale.code)"
-        >
-          {{ locale.name }}
-        </nuxt-link>
-      </v-list>
-    </v-menu>
+    <locale-menu />
     <v-btn
       v-if="isAuthenticated"
       text
@@ -121,10 +97,12 @@
 <script>
 import { mapGetters, mapActions } from 'vuex'
 import TheColorModeSwitcher from '@/components/organisms/layout/TheColorModeSwitcher'
+import LocaleMenu from '@/components/organisms/layout/LocaleMenu'
 
 export default {
   components: {
-    TheColorModeSwitcher
+    TheColorModeSwitcher,
+    LocaleMenu
   },
 
   data() {