Created a menu for the LocaleSwitch

components/Dropdown.vue

@@ -5,12 +5,10 @@
     :placement="placement"
     trigger="manual"
     offset="10"
-    style="float: right"
   >
     <slot :toggleMenu="toggleMenu" />
     <div
       slot="popover"
-      style="padding-top: .5rem; padding-bottom: .5rem;"
       @mouseover="popoverMouseEnter"
       @mouseleave="popoveMouseLeave"
     >

components/LocaleSwitch.vue

@@ -1,49 +1,134 @@
 <template>
-  <!-- eslint-disable vue/html-self-closing -->
-  <div>
-    <!-- TODO: use custom dropdown menu, popover or modal for language selection -->
-    <a
-      v-if="$i18n.locale() === 'en'"
-      href="#"
-      @click.prevent="changeLanguage('de')"
+  <dropdown
+    ref="menu"
+    placement="right-start"
+  >
+    <template
+      slot="default"
+      slot-scope="{toggleMenu}"
     >
-      <img
-        alt="English"
-        title="English"
-        :src="`/img/locale-flags/${$i18n.locale()}.svg`"
-        height="26"
-      />
-    </a>
-    <a
-      v-else
-      href="#"
-      @click.prevent="changeLanguage('en')"
-    >
-      <img
-        alt="Deutsch"
-        title="Deutsch"
-        :src="`/img/locale-flags/${$i18n.locale()}.svg`"
-        height="26"
-      />
-    </a>
-  </div>
+      <a
+        class="locale-menu"
+        href="#"
+        @click.prevent="toggleMenu()"
+      >
+        <img
+          :alt="current.name"
+          :title="current.name"
+          :src="`/img/locale-flags/${current.code}.svg`"
+          height="26"
+        >
+      </a>
+    </template>
+    <template slot="popover">
+      <ul class="locale-menu-popover">
+        <li
+          v-for="locale in locales"
+          :key="locale.code"
+        >
+          <a
+            href="#"
+            :class="[ current.code === locale.code && 'active' ]"
+            @click.prevent="changeLanguage(locale.code)"
+          >
+            <img
+              :alt="locale.name"
+              :title="locale.name"
+              :src="`/img/locale-flags/${locale.code}.svg`"
+              height="26"
+            > {{ locale.name }}
+          </a>
+        </li>
+      </ul>
+    </template>
+  </dropdown>
 </template>
 
 <script>
+import Dropdown from '~/components/Dropdown'
+import find from 'lodash/find'
+
 export default {
+  components: {
+    Dropdown
+  },
+  computed: {
+    current() {
+      return find(this.locales, ['code', this.$i18n.locale()])
+    },
+    locales() {
+      return [
+        {
+          name: 'English',
+          code: 'en'
+        },
+        {
+          name: 'Deutsch',
+          code: 'de'
+        },
+        {
+          name: 'Nederlands',
+          code: 'nl'
+        },
+        {
+          name: 'Italiano',
+          code: 'it'
+        },
+        {
+          name: 'Español',
+          code: 'es'
+        },
+        {
+          name: 'Portuguese',
+          code: 'pt'
+        },
+        {
+          name: 'Polski',
+          code: 'pl'
+        }
+      ]
+    }
+  },
   methods: {
     changeLanguage(locale) {
       // TODO: move that logic to store!?
       // check if the locale has already been loaded
       if (this.$i18n.localeExists(locale)) {
         this.$i18n.set(locale)
+        this.$refs.menu.toggleMenu()
         return
       }
       import(`~/locales/${locale}.json`).then(res => {
         this.$i18n.add(locale, res.default)
         this.$i18n.set(locale)
+        this.$refs.menu.toggleMenu()
       })
     }
   }
 }
 </script>
+
+<style lang="scss">
+ul.locale-menu-popover {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    a {
+      opacity: 0.8;
+
+      display: block;
+      padding: 0.2rem 0;
+
+      &:hover {
+        opacity: 1;
+      }
+      &.active {
+        opacity: 1;
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>

layouts/default.vue

@@ -11,13 +11,13 @@
         <locale-switch class="topbar-locale-switch" />
         <template v-if="isLoggedIn">
           <no-ssr>
-            <dropdown>
+            <dropdown class="avatar-menu">
               <template
                 slot="default"
                 slot-scope="{toggleMenu}"
               >
                 <a
-                  class="avatar-menu"
+                  class="avatar-menu-trigger"
                   :href="$router.resolve({name: 'profile-slug', params: {slug: user.slug}}).href"
                   @click.prevent="toggleMenu()"
                 >
@@ -122,4 +122,12 @@ export default {
   top: -16px;
   position: relative;
 }
+.avatar-menu {
+  float: right;
+}
+.avatar-popup-menu {
+  display: inline-block;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
 </style>