Fixed is-exact usage ofr user menu and optimized Dropdown internals

components/Dropdown.vue

@@ -55,7 +55,6 @@ export default {
     isPopoverOpen: {
       immediate: true,
       handler(isOpen) {
-        console.log('isOpen', isOpen)
         try {
           if (isOpen) {
             this.$nextTick(() => {
@@ -80,18 +79,14 @@ export default {
   },
   methods: {
     toggleMenu() {
-      if (this.disabled) {
-        return
-      }
-      clearTimeout(mouseEnterTimer)
-      clearTimeout(mouseLeaveTimer)
-      this.isPopoverOpen = !this.isPopoverOpen
+      this.isPopoverOpen ? this.closeMenu(false) : this.openMenu(false)
     },
     openMenu(useTimeout) {
       if (this.disabled) {
         return
       }
-      if (useTimeout) {
+      this.clearTimeouts()
+      if (useTimeout === true) {
         this.popoverMouseEnter()
       } else {
         this.isPopoverOpen = true
@@ -101,7 +96,8 @@ export default {
       if (this.disabled) {
         return
       }
-      if (useTimeout) {
+      this.clearTimeouts()
+      if (useTimeout === true) {
         this.popoveMouseLeave()
       } else {
         this.isPopoverOpen = false
@@ -111,8 +107,7 @@ export default {
       if (this.disabled) {
         return
       }
-      clearTimeout(mouseEnterTimer)
-      clearTimeout(mouseLeaveTimer)
+      this.clearTimeouts()
       if (!this.isPopoverOpen) {
         mouseEnterTimer = setTimeout(() => {
           this.isPopoverOpen = true
@@ -123,13 +118,16 @@ export default {
       if (this.disabled) {
         return
       }
-      clearTimeout(mouseEnterTimer)
-      clearTimeout(mouseLeaveTimer)
+      this.clearTimeouts()
       if (this.isPopoverOpen) {
         mouseLeaveTimer = setTimeout(() => {
           this.isPopoverOpen = false
         }, 300)
       }
+    },
+    clearTimeouts() {
+      clearTimeout(mouseEnterTimer)
+      clearTimeout(mouseLeaveTimer)
     }
   }
 }

layouts/default.vue

@@ -26,7 +26,7 @@
                   <a
                     class="avatar-menu-trigger"
                     :href="$router.resolve({name: 'profile-slug', params: {slug: user.slug}}).href"
-                    @click.prevent="toggleMenu()"
+                    @click.prevent="toggleMenu"
                   >
                     <ds-avatar
                       :image="user.avatar"
@@ -37,7 +37,7 @@
                 </template>
                 <template
                   slot="popover"
-                  slot-scope="{toggleMenu}"
+                  slot-scope="{closeMenu}"
                 >
                   <div class="avatar-menu-popover">
                     {{ $t('login.hello') }} <b>{{ user.name }}</b>
@@ -50,13 +50,16 @@
                         slot-scope="item"
                         :route="item.route"
                         :parents="item.parents"
-                        @click.native="toggleMenu"
+                        @click.native="closeMenu(false)"
                       >
                         <ds-icon :name="item.route.icon" /> {{ item.route.name }}
                       </ds-menu-item>
                     </ds-menu>
                     <ds-space margin="xx-small" />
-                    <nuxt-link :to="{ name: 'logout'}">
+                    <nuxt-link
+                      :to="{ name: 'logout'}"
+                      style="margin-left: 0"
+                    >
                       <ds-icon name="sign-out" /> {{ $t('login.logout') }}
                     </nuxt-link>
                   </div>
@@ -122,6 +125,10 @@ export default {
   },
   methods: {
     isExact(url) {
+      if (url.indexOf('/profile') === 0) {
+        // do only match own profile
+        this.$route.path === url
+      }
       return this.$route.path.indexOf(url) === 0
     }
   }
@@ -148,10 +155,14 @@ export default {
   padding-bottom: 0.5rem;
 
   nav {
-    margin-left: -15px;
-    margin-right: -15px;
+    margin-left: -16px;
+    margin-right: -10px;
     padding-top: 1rem;
     padding-bottom: 1rem;
+
+    a {
+      padding-left: 12px;
+    }
   }
 }
 </style>

styleguide/src/system/components/navigation/Menu/MenuItem.vue

@@ -14,6 +14,10 @@
     <component
       v-if="route"
       class="ds-menu-item-link"
+      :class="[
+        isExact && 'router-active-link',
+        isExact && 'router-link-exact-active'
+      ]"
       v-bind="bindings"
       :exact="isExact"
       :is="linkTag"