Centralized locale configuration and improved menu

components/LocaleSwitch.vue

@@ -40,7 +40,7 @@
               :alt="locale.name"
               :title="locale.name"
               :src="`/img/locale-flags/${locale.code}.svg`"
-              width="22"
+              width="20"
             > {{ locale.name }}
           </a>
         </li>
@@ -61,41 +61,15 @@ export default {
     placement: { type: String, default: 'bottom-start' },
     offset: { type: [String, Number], default: '16' }
   },
+  data() {
+    return {
+      locales: process.env.locales
+    }
+  },
   computed: {
     current() {
+      console.log('locales', this.locales)
       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: {
@@ -118,6 +92,10 @@ export default {
 </script>
 
 <style lang="scss">
+.locale-menu {
+  user-select: none;
+}
+
 ul.locale-menu-popover {
   list-style: none;
   padding: 0;
@@ -128,7 +106,7 @@ ul.locale-menu-popover {
       opacity: 0.8;
 
       display: block;
-      padding: 0.2rem 0;
+      padding: 0.3rem 0;
 
       img {
         margin-right: 8px;

layouts/default.vue

@@ -135,6 +135,10 @@ export default {
 .avatar-menu {
   float: right;
 }
+
+.avatar-menu-trigger {
+  user-select: none;
+}
 .avatar-menu-popover {
   display: inline-block;
   padding-top: 0.5rem;

locales/index.js

@@ -0,0 +1,42 @@
+module.exports = [
+  {
+    name: 'English',
+    code: 'en',
+    enabled: true
+  },
+  {
+    name: 'Deutsch',
+    code: 'de',
+    enabled: true
+  },
+  {
+    name: 'Nederlands',
+    code: 'nl',
+    enabled: true
+  },
+  {
+    name: 'Français',
+    code: 'fr',
+    enabled: true
+  },
+  {
+    name: 'Italiano',
+    code: 'it',
+    enabled: true
+  },
+  {
+    name: 'Español',
+    code: 'es',
+    enabled: true
+  },
+  {
+    name: 'Portuguese',
+    code: 'pt',
+    enabled: true
+  },
+  {
+    name: 'Polski',
+    code: 'pl',
+    enabled: true
+  }
+]

nuxt.config.js

@@ -28,7 +28,7 @@ module.exports = {
     // pages to keep alive
     keepAlivePages: ['index'],
     // active locales
-    locales: ['en', 'de', 'nl', 'fr', 'es', 'pt', 'it', 'pl']
+    locales: require('./locales')
   },
   /*
   ** Headers of the page

plugins/i18n.js

@@ -62,7 +62,7 @@ export default ({ app, req, cookie, store }) => {
     }
   }
 
-  const availableLocales = process.env.locales
+  const availableLocales = process.env.locales.filter(lang => !!lang.enabled)
   const locale = availableLocales.indexOf(userLocale) >= 0 ? userLocale : 'en'
 
   if (locale !== 'en') {

styleguide/src/system/components/navigation/Menu/style.scss

@@ -44,6 +44,7 @@ ul.ds-menu-list {
   text-decoration: none;
   padding: $space-x-small $space-small;
   transition: color $duration-short $ease-out;
+  border-left: 2px solid transparent;
 
   &.router-link-active,
   &.nuxt-link-active {
@@ -56,8 +57,9 @@ ul.ds-menu-list {
 
   &.router-link-exact-active,
   &.nuxt-link-exact-active {
-    color: $text-color-link-active;
-    background-color: $background-color-soft;
+    color: $text-color-link;
+    // background-color: $background-color-soft;
+    border-left: 2px solid $color-primary;
   }
 
   .ds-menu-item-inverse & {