From d6f5232d457cb27ccebc174cd8e778185ba9e9b0 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 12 Jan 2019 17:06:43 +0100
Subject: [PATCH 1/9] =?UTF-8?q?User=20Portugu=C3=AAs=20for=20Portuguese?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locales/index.js b/locales/index.js
index daafb6577..35a99b317 100644
--- a/locales/index.js
+++ b/locales/index.js
@@ -36,7 +36,7 @@ module.exports = [
     enabled: true
   },
   {
-    name: 'Portuguese',
+    name: 'Português',
     code: 'pt',
     iso: 'pt-PT',
     enabled: true

From 9f03ac3cd938e38314742e849a2160f73aab01bf Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 12 Jan 2019 17:07:00 +0100
Subject: [PATCH 2/9] Sort Languages alphabetically

---
 components/LocaleSwitch.vue | 41 ++++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/components/LocaleSwitch.vue b/components/LocaleSwitch.vue
index 88e7bdcb1..74e1a2d3b 100644
--- a/components/LocaleSwitch.vue
+++ b/components/LocaleSwitch.vue
@@ -4,23 +4,23 @@
     :placement="placement"
     :offset="offset"
   >
-    <template
+    <a
       slot="default"
       slot-scope="{toggleMenu}"
+      class="locale-menu"
+      href="#"
+      @click.prevent="toggleMenu()"
     >
-      <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>
+      <ds-icon
+        style="margin-top: -2px; margin-right: 2px;"
+        name="globe"
+      /> {{ current.code.toUpperCase() }}
+      <ds-icon
+        style="margin-top: -2px; margin-left: 2px"
+        size="xx-small"
+        name="angle-down"
+      />
+    </a>
     <template slot="popover">
       <ul class="locale-menu-popover">
         <li
@@ -36,12 +36,7 @@
             ]"
             @click.prevent="changeLanguage(locale.code)"
           >
-            <img
-              :alt="locale.name"
-              :title="locale.name"
-              :src="`/img/locale-flags/${locale.code}.svg`"
-              width="20"
-            > {{ locale.name }}
+            {{ locale.name }}
           </a>
         </li>
       </ul>
@@ -52,6 +47,7 @@
 <script>
 import Dropdown from '~/components/Dropdown'
 import find from 'lodash/find'
+import orderBy from 'lodash/orderBy'
 
 export default {
   components: {
@@ -63,7 +59,7 @@ export default {
   },
   data() {
     return {
-      locales: process.env.locales
+      locales: orderBy(process.env.locales, 'name')
     }
   },
   computed: {
@@ -83,6 +79,9 @@ export default {
 <style lang="scss">
 .locale-menu {
   user-select: none;
+  display: flex;
+  align-items: center;
+  height: 100%;
 }
 
 ul.locale-menu-popover {

From f7f6eeab39d5888804cc27c81ed4b6e68eb2bfe8 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 12 Jan 2019 17:07:23 +0100
Subject: [PATCH 3/9] Improved Topbar link positioning and language item

---
 layouts/default.vue | 40 +++++++++++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index f79b00db5..045bfb357 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,19 +1,21 @@
 <template>
   <div class="layout-default">
     <div class="main-navigation">
-      <ds-container style="padding: .5rem 3rem .2rem;">
-        <a
-          v-router-link
-          href="/"
-        >
-          <ds-logo />
-        </a>
-        <div style="float: right">
+      <ds-container style="padding: .5rem 2rem .2rem; display: flex;">
+        <div class="main-navigation-left">
+          <a
+            v-router-link
+            href="/"
+          >
+            <ds-logo />
+          </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,11 @@
                       :name="user.name"
                       size="42"
                     />
+                    <ds-icon
+                      style="margin-left: -4px"
+                      size="xx-small"
+                      name="angle-down"
+                    />
                   </a>
                 </template>
                 <template
@@ -137,15 +144,22 @@ export default {
 
 <style lang="scss">
 .topbar-locale-switch {
-  display: inline-block;
-  top: 8px;
-  right: 10px;
-  position: relative;
+  display: flex;
+  margin-right: $space-small;
 }
 .avatar-menu {
   float: right;
 }
 
+.main-navigation-left {
+  display: flex;
+  margin-right: auto;
+}
+.main-navigation-right {
+  display: flex;
+  margin-left: auto;
+}
+
 .avatar-menu-trigger {
   user-select: none;
 }

From c50c794e12e71a3b0726228d566148299f9d26ea Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 12 Jan 2019 17:39:33 +0100
Subject: [PATCH 4/9] Improved LocaleSwitch and Avatar Item in Topbar

---
 components/LocaleSwitch.vue | 83 +++++++++++++++++--------------------
 layouts/default.vue         | 10 ++---
 2 files changed, 42 insertions(+), 51 deletions(-)

diff --git a/components/LocaleSwitch.vue b/components/LocaleSwitch.vue
index 74e1a2d3b..707cfd53a 100644
--- a/components/LocaleSwitch.vue
+++ b/components/LocaleSwitch.vue
@@ -21,26 +21,24 @@
         name="angle-down"
       />
     </a>
-    <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)"
-          >
-            {{ locale.name }}
-          </a>
-        </li>
-      </ul>
-    </template>
+    <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)"
+      >
+        {{ item.route.name }}
+      </ds-menu-item>
+    </ds-menu>
   </dropdown>
 </template>
 
@@ -65,12 +63,24 @@ export default {
   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()
     }
   }
 }
@@ -82,32 +92,15 @@ export default {
   display: flex;
   align-items: center;
   height: 100%;
+  padding: $space-xx-small;
 }
 
-ul.locale-menu-popover {
-  list-style: none;
-  padding: 0;
-  margin: 0;
+nav.locale-menu-popover {
+  margin-left: -$space-small !important;
+  margin-right: -$space-small !important;
 
-  li {
-    a {
-      opacity: 0.8;
-
-      display: block;
-      padding: 0.3rem 0;
-
-      img {
-        margin-right: 8px;
-      }
-
-      &:hover {
-        opacity: 1;
-      }
-      &.active {
-        opacity: 1;
-        font-weight: bold;
-      }
-    }
+  a {
+    padding: $space-x-small $space-small;
   }
 }
 </style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 045bfb357..5756e1fa2 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -15,7 +15,6 @@
             <locale-switch
               class="topbar-locale-switch"
               placement="bottom"
-              offset="12"
             />
           </no-ssr>
           <template v-if="isLoggedIn">
@@ -36,7 +35,6 @@
                       size="42"
                     />
                     <ds-icon
-                      style="margin-left: -4px"
                       size="xx-small"
                       name="angle-down"
                     />
@@ -145,10 +143,7 @@ export default {
 <style lang="scss">
 .topbar-locale-switch {
   display: flex;
-  margin-right: $space-small;
-}
-.avatar-menu {
-  float: right;
+  margin-right: $space-xx-small;
 }
 
 .main-navigation-left {
@@ -162,6 +157,9 @@ export default {
 
 .avatar-menu-trigger {
   user-select: none;
+  display: flex;
+  align-items: center;
+  padding-left: $space-xx-small;
 }
 .avatar-menu-popover {
   display: inline-block;

From b59ff6a7f02f48dc66b7e3f3f3ce698d9648964f Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 12 Jan 2019 18:16:31 +0100
Subject: [PATCH 5/9] Improved Avatar menu

---
 assets/styles/main.scss     | 12 ++++++++++++
 components/LocaleSwitch.vue |  1 +
 layouts/default.vue         | 27 +++++++++++++++++++++------
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 91b040f54..beb7d3545 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -146,3 +146,15 @@ hr {
     transition-delay: 0;
   }
 }
+
+[class$="menu-popover"] {
+  a, button {
+    display: flex;
+    align-content: center;
+    align-items: center;
+
+    .ds-icon {
+      padding-right: $space-xx-small;
+    }
+  }
+}
diff --git a/components/LocaleSwitch.vue b/components/LocaleSwitch.vue
index 707cfd53a..1a2c96e56 100644
--- a/components/LocaleSwitch.vue
+++ b/components/LocaleSwitch.vue
@@ -101,6 +101,7 @@ nav.locale-menu-popover {
 
   a {
     padding: $space-x-small $space-small;
+    padding-right: $space-base;
   }
 }
 </style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 5756e1fa2..ef3dd2d2e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -46,6 +46,7 @@
                 >
                   <div class="avatar-menu-popover">
                     {{ $t('login.hello') }} <b>{{ user.name }}</b>
+                    <hr>
                     <ds-menu
                       :routes="routes"
                       :is-exact="isExact"
@@ -60,10 +61,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>
@@ -166,11 +167,25 @@ export default {
   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-right: -10px;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
+    margin-left: -$space-small;
+    margin-right: -$space-small;
+    margin-top: -$space-xx-small;
+    margin-bottom: -$space-xx-small;
+    // padding-top: $space-xx-small;
+    // padding-bottom: $space-xx-small;
 
     a {
       padding-left: 12px;

From 3f67630de5d09763a7d4d4557133c05bab78f4e0 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 12 Jan 2019 18:22:43 +0100
Subject: [PATCH 6/9] Improve look of topbar links and locale switch

---
 components/LocaleSwitch.vue | 1 +
 layouts/default.vue         | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/components/LocaleSwitch.vue b/components/LocaleSwitch.vue
index 1a2c96e56..76060bd20 100644
--- a/components/LocaleSwitch.vue
+++ b/components/LocaleSwitch.vue
@@ -93,6 +93,7 @@ export default {
   align-items: center;
   height: 100%;
   padding: $space-xx-small;
+  color: $text-color-soft;
 }
 
 nav.locale-menu-popover {
diff --git a/layouts/default.vue b/layouts/default.vue
index ef3dd2d2e..59a8ca205 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -147,6 +147,12 @@ export default {
   margin-right: $space-xx-small;
 }
 
+.main-navigation {
+  a {
+    color: $text-color-soft;
+  }
+}
+
 .main-navigation-left {
   display: flex;
   margin-right: auto;

From a07b71dea40722afaa73fc9ffacd54ac50ba4eb3 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sun, 13 Jan 2019 14:31:48 +0100
Subject: [PATCH 7/9] Fixed dropdown trigger link active status while open

---
 assets/styles/main.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index beb7d3545..a6e4803d0 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -158,3 +158,7 @@ hr {
     }
   }
 }
+
+.v-popover.open .trigger a {
+  color: $text-color-link-active;
+}

From ff0d4e3a70a355c35c2ba0204b57dc821327c15b Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sun, 13 Jan 2019 14:39:24 +0100
Subject: [PATCH 8/9] Remove outline for links inside topbar

---
 assets/styles/main.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index a6e4803d0..4de4febfc 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -78,6 +78,10 @@ blockquote {
   position: fixed;
   width: 100%;
   z-index: 10;
+
+  a {
+    outline: none;
+  }
 }
 
 .hc-editor-content {

From 8fe8500b24687bdf2410f208f4e25c973608ced2 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sun, 13 Jan 2019 14:39:46 +0100
Subject: [PATCH 9/9] Normalize offset for topbar locale switch

---
 layouts/default.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/layouts/default.vue b/layouts/default.vue
index 59a8ca205..878903e5e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -15,6 +15,7 @@
             <locale-switch
               class="topbar-locale-switch"
               placement="bottom"
+              offset="12"
             />
           </no-ssr>
           <template v-if="isLoggedIn">