Improved Dropdown component and fixed some js errors

components/Dropdown.vue

@@ -4,7 +4,7 @@
     :open-group="Math.random().toString()"
     :placement="placement"
     trigger="manual"
-    offset="10"
+    :offset="offset"
   >
     <slot :toggleMenu="toggleMenu" />
     <div
@@ -12,7 +12,10 @@
       @mouseover="popoverMouseEnter"
       @mouseleave="popoveMouseLeave"
     >
-      <slot name="popover" />
+      <slot
+        name="popover"
+        :toggleMenu="toggleMenu"
+      />
     </div>
   </v-popover>
 </template>
@@ -25,7 +28,8 @@ let mouseLeaveTimer = null
 
 export default {
   props: {
-    placement: { type: String, default: 'bottom-end' }
+    placement: { type: String, default: 'bottom-end' },
+    offset: { type: [String, Number], default: '16' }
   },
   data() {
     return {

components/LocaleSwitch.vue

@@ -1,7 +1,8 @@
 <template>
   <dropdown
     ref="menu"
-    placement="right-start"
+    :placement="placement"
+    :offset="offset"
   >
     <template
       slot="default"
@@ -55,6 +56,10 @@ export default {
   components: {
     Dropdown
   },
+  props: {
+    placement: { type: String, default: 'right-start' },
+    offset: { type: [String, Number], default: '16' }
+  },
   computed: {
     current() {
       return find(this.locales, ['code', this.$i18n.locale()])

layouts/default.vue

@@ -8,7 +8,13 @@
         >
           <ds-logo />
         </a>
-        <locale-switch class="topbar-locale-switch" />
+        <no-ssr>
+          <locale-switch
+            class="topbar-locale-switch"
+            placement="bottom"
+            offset="24"
+          />
+        </no-ssr>
         <template v-if="isLoggedIn">
           <no-ssr>
             <dropdown class="avatar-menu">
@@ -30,13 +36,13 @@
               </template>
               <template
                 slot="popover"
-                class="avatar-menu-popover"
+                slot-scope="{toggleMenu}"
               >
+                <div class="avatar-menu-popover">
                   {{ $t('login.hello') }} <b>{{ user.name }}</b>
                   <ds-menu
                     :routes="routes"
                     :is-exact="isExact"
-                  style="margin-left: -15px; margin-right: -15px; padding-top: 1rem; padding-bottom: 1rem;"
                   >
                     <ds-menu-item
                       slot="Navigation"
@@ -52,6 +58,7 @@
                   <nuxt-link :to="{ name: 'logout'}">
                     <ds-icon name="sign-out" /> {{ $t('login.logout') }}
                   </nuxt-link>
+                </div>
               </template>
             </dropdown>
           </no-ssr>
@@ -125,9 +132,16 @@ export default {
 .avatar-menu {
   float: right;
 }
-.avatar-popup-menu {
+.avatar-menu-popover {
   display: inline-block;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+
+  nav {
+    margin-left: -15px;
+    margin-right: -15px;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
 }
 </style>

pages/login.vue

@@ -19,7 +19,9 @@
             :width="{ base: '100%', sm: '50%' }"
             center
           >
+            <no-ssr>
               <locale-switch class="login-locale-switch" />
+            </no-ssr>
             <ds-space
               margin-top="small"
               margin-bottom="xxx-small"