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] 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;