merged master in

assets/styles/main.scss

@@ -78,6 +78,10 @@ blockquote {
   position: fixed;
   width: 100%;
   z-index: 10;
+
+  a {
+    outline: none;
+  }
 }
 
 .hc-editor-content {
@@ -156,3 +160,19 @@ hr {
     padding: $space-base;
   }
 }
+
+[class$="menu-popover"] {
+  a, button {
+    display: flex;
+    align-content: center;
+    align-items: center;
+
+    .ds-icon {
+      padding-right: $space-xx-small;
+    }
+  }
+}
+
+.v-popover.open .trigger a {
+  color: $text-color-link-active;
+}

components/LocaleSwitch.vue

@@ -4,54 +4,48 @@
     :placement="placement"
     :offset="offset"
   >
-    <template
+    <a
       slot="default"
       slot-scope="{toggleMenu}"
+      class="locale-menu"
+      href="#"
+      @click.prevent="toggleMenu()"
     >
-      <a
+      <ds-icon
-        class="locale-menu"
+        style="margin-top: -2px; margin-right: 2px;"
-        href="#"
+        name="globe"
-        @click.prevent="toggleMenu()"
+      /> {{ current.code.toUpperCase() }}
+      <ds-icon
+        style="margin-top: -2px; margin-left: 2px"
+        size="xx-small"
+        name="angle-down"
+      />
+    </a>
+    <ds-menu
+      slot="popover"
+      slot-scope="{toggleMenu}"
+      class="locale-menu-popover"
+      :is-exact="isExact"
+      :routes="routes"
+    >
+      <ds-menu-item
+        slot="Navigation"
+        slot-scope="item"
+        class="locale-menu-item"
+        :route="item.route"
+        :parents="item.parents"
+        @click.stop.prevent="changeLanguage(item.route.path, toggleMenu)"
       >
-        <img
+        {{ item.route.name }}
-          :alt="current.name"
+      </ds-menu-item>
-          :title="current.name"
+    </ds-menu>
-          :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="#"
-            style="display: flex; align-items: center;"
-            :class="[
-              locale.code,
-              current.code === locale.code && 'active'
-            ]"
-            @click.prevent="changeLanguage(locale.code)"
-          >
-            <img
-              :alt="locale.name"
-              :title="locale.name"
-              :src="`/img/locale-flags/${locale.code}.svg`"
-              width="20"
-            > {{ locale.name }}
-          </a>
-        </li>
-      </ul>
-    </template>
   </dropdown>
 </template>
 
 <script>
 import Dropdown from '~/components/Dropdown'
 import find from 'lodash/find'
+import orderBy from 'lodash/orderBy'
 
 export default {
   components: {
@@ -63,18 +57,30 @@ export default {
   },
   data() {
     return {
-      locales: process.env.locales
+      locales: orderBy(process.env.locales, 'name')
     }
   },
   computed: {
     current() {
       return find(this.locales, { code: this.$i18n.locale() })
+    },
+    routes() {
+      let routes = this.locales.map(locale => {
+        return {
+          name: locale.name,
+          path: locale.code
+        }
+      })
+      return routes
     }
   },
   methods: {
-    changeLanguage(locale) {
+    changeLanguage(locale, toggleMenu) {
       this.$i18n.set(locale)
-      this.$refs.menu.toggleMenu()
+      toggleMenu()
+    },
+    isExact(locale) {
+      return locale === this.$i18n.locale()
     }
   }
 }
@@ -83,32 +89,20 @@ export default {
 <style lang="scss">
 .locale-menu {
   user-select: none;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: $space-xx-small;
+  color: $text-color-soft;
 }
 
-ul.locale-menu-popover {
+nav.locale-menu-popover {
-  list-style: none;
+  margin-left: -$space-small !important;
-  padding: 0;
+  margin-right: -$space-small !important;
-  margin: 0;
 
-  li {
+  a {
-    a {
+    padding: $space-x-small $space-small;
-      opacity: 0.8;
+    padding-right: $space-base;
-
-      display: block;
-      padding: 0.3rem 0;
-
-      img {
-        margin-right: 8px;
-      }
-
-      &:hover {
-        opacity: 1;
-      }
-      &.active {
-        opacity: 1;
-        font-weight: bold;
-      }
-    }
   }
 }
 </style>

layouts/default.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="layout-default">
     <div class="main-navigation">
-      <ds-container style="padding: .5rem 3rem .2rem;">
+      <ds-container style="padding: .5rem 2rem .2rem; display: flex;">
-        <a
+        <div class="main-navigation-left">
-          v-router-link
+          <a
-          href="/"
+            v-router-link
-        >
+            href="/"
-          <ds-logo />
+          >
-        </a>
+            <ds-logo />
-        <div style="float: right">
+          </a>
+        </div>
+        <div class="main-navigation-right">
           <no-ssr>
             <locale-switch
               class="topbar-locale-switch"
               placement="bottom"
-              offset="24"
+              offset="12"
             />
           </no-ssr>
           <template v-if="isLoggedIn">
@@ -33,6 +35,10 @@
                       :name="user.name"
                       size="42"
                     />
+                    <ds-icon
+                      size="xx-small"
+                      name="angle-down"
+                    />
                   </a>
                 </template>
                 <template
@@ -41,6 +47,7 @@
                 >
                   <div class="avatar-menu-popover">
                     {{ $t('login.hello') }} <b>{{ user.name }}</b>
+                    <hr>
                     <ds-menu
                       :routes="routes"
                       :matcher="matcher"
@@ -55,10 +62,10 @@
                         <ds-icon :name="item.route.icon" /> {{ item.route.name }}
                       </ds-menu-item>
                     </ds-menu>
-                    <ds-space margin="xx-small" />
+                    <hr>
                     <nuxt-link
+                      class="logout-link"
                       :to="{ name: 'logout'}"
-                      style="margin-left: 0"
                     >
                       <ds-icon name="sign-out" /> {{ $t('login.logout') }}
                     </nuxt-link>
@@ -137,28 +144,55 @@ export default {
 
 <style lang="scss">
 .topbar-locale-switch {
-  display: inline-block;
+  display: flex;
-  top: 8px;
+  margin-right: $space-xx-small;
-  right: 10px;
-  position: relative;
 }
-.avatar-menu {
+
-  float: right;
+.main-navigation {
+  a {
+    color: $text-color-soft;
+  }
+}
+
+.main-navigation-left {
+  display: flex;
+  margin-right: auto;
+}
+.main-navigation-right {
+  display: flex;
+  margin-left: auto;
 }
 
 .avatar-menu-trigger {
   user-select: none;
+  display: flex;
+  align-items: center;
+  padding-left: $space-xx-small;
 }
 .avatar-menu-popover {
   display: inline-block;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 
+  hr {
+    color: $color-neutral-90;
+    background-color: $color-neutral-90;
+  }
+
+  .logout-link {
+    margin-left: -$space-small;
+    margin-right: -$space-small;
+    margin-bottom: -$space-xx-small;
+    padding: $space-xx-small $space-small;
+  }
+
   nav {
-    margin-left: -16px;
+    margin-left: -$space-small;
-    margin-right: -10px;
+    margin-right: -$space-small;
-    padding-top: 1rem;
+    margin-top: -$space-xx-small;
-    padding-bottom: 1rem;
+    margin-bottom: -$space-xx-small;
+    // padding-top: $space-xx-small;
+    // padding-bottom: $space-xx-small;
 
     a {
       padding-left: 12px;

locales/index.js

@@ -36,7 +36,7 @@ module.exports = [
     enabled: true
   },
   {
-    name: 'Portuguese',
+    name: 'Português',
     code: 'pt',
     iso: 'pt-PT',
     enabled: true