From e49534cdf6c84f284851d6d8c37d5d58142367d1 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 18 Dec 2018 18:37:45 +0100
Subject: [PATCH] Created dropdown component

---
 components/Dropdown.vue | 65 +++++++++++++++++++++++++++++++
 layouts/default.vue     | 85 +++++++++++++----------------------------
 2 files changed, 91 insertions(+), 59 deletions(-)
 create mode 100644 components/Dropdown.vue

diff --git a/components/Dropdown.vue b/components/Dropdown.vue
new file mode 100644
index 000000000..86219d539
--- /dev/null
+++ b/components/Dropdown.vue
@@ -0,0 +1,65 @@
+<template>
+  <v-popover
+    :open.sync="isPopoverOpen"
+    :open-group="Math.random().toString()"
+    :placement="placement"
+    trigger="manual"
+    offset="10"
+    style="float: right"
+  >
+    <slot :toggleMenu="toggleMenu" />
+    <div
+      slot="popover"
+      style="padding-top: .5rem; padding-bottom: .5rem;"
+      @mouseover="popoverMouseEnter"
+      @mouseleave="popoveMouseLeave"
+    >
+      <slot name="popover" />
+    </div>
+  </v-popover>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+let mouseEnterTimer = null
+let mouseLeaveTimer = null
+
+export default {
+  props: {
+    placement: { type: String, default: 'bottom-end' }
+  },
+  data() {
+    return {
+      isPopoverOpen: false
+    }
+  },
+  beforeDestroy() {
+    clearTimeout(mouseEnterTimer)
+    clearTimeout(mouseLeaveTimer)
+  },
+  methods: {
+    toggleMenu() {
+      this.isPopoverOpen = !this.isPopoverOpen
+    },
+    popoverMouseEnter() {
+      clearTimeout(mouseEnterTimer)
+      clearTimeout(mouseLeaveTimer)
+      if (!this.isPopoverOpen) {
+        mouseEnterTimer = setTimeout(() => {
+          this.isPopoverOpen = true
+        }, 500)
+      }
+    },
+    popoveMouseLeave() {
+      clearTimeout(mouseEnterTimer)
+      clearTimeout(mouseLeaveTimer)
+      if (this.isPopoverOpen) {
+        mouseLeaveTimer = setTimeout(() => {
+          this.isPopoverOpen = false
+        }, 300)
+      }
+    }
+  }
+}
+</script>
diff --git a/layouts/default.vue b/layouts/default.vue
index 658930891..0698bd5ee 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -11,42 +11,40 @@
         <locale-switch class="topbar-locale-switch" />
         <template v-if="isLoggedIn">
           <no-ssr>
-            <v-popover
-              :open.sync="isPopoverOpen"
-              :open-group="Math.random().toString()"
-              placement="bottom-end"
-              trigger="manual"
-              offset="10"
-              style="float: right"
-            >
-              <a
-                class="avatar-menu"
-                :href="$router.resolve({name: 'profile-slug', params: {slug: user.slug}}).href"
-                @click.prevent="toggleMenu()"
+            <dropdown>
+              <template
+                slot="default"
+                slot-scope="{toggleMenu}"
               >
-                <ds-avatar
-                  :image="user.avatar"
-                  :name="user.name"
-                  size="42"
-                />
-              </a>
-              <div
+                <a
+                  class="avatar-menu"
+                  :href="$router.resolve({name: 'profile-slug', params: {slug: user.slug}}).href"
+                  @click.prevent="toggleMenu()"
+                >
+                  <ds-avatar
+                    :image="user.avatar"
+                    :name="user.name"
+                    size="42"
+                  />
+                </a>
+              </template>
+              <template
                 slot="popover"
                 class="avatar-menu-popover"
-                style="padding-top: .5rem; padding-bottom: .5rem;"
-                @mouseover="popoverMouseEnter"
-                @mouseleave="popoveMouseLeave">
+              >
                 {{ $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;">
+                  style="margin-left: -15px; margin-right: -15px; padding-top: 1rem; padding-bottom: 1rem;"
+                >
                   <ds-menu-item
                     slot="Navigation"
                     slot-scope="item"
                     :route="item.route"
                     :parents="item.parents"
-                    @click.native="toggleMenu">
+                    @click.native="toggleMenu"
+                  >
                     <ds-icon :name="item.route.icon" /> {{ item.route.name }}
                   </ds-menu-item>
                 </ds-menu>
@@ -54,8 +52,8 @@
                 <nuxt-link :to="{ name: 'logout'}">
                   <ds-icon name="sign-out" /> {{ $t('login.logout') }}
                 </nuxt-link>
-              </div>
-            </v-popover>
+              </template>
+            </dropdown>
           </no-ssr>
         </template>
       </ds-container>
@@ -71,19 +69,13 @@
 <script>
 import { mapGetters } from 'vuex'
 import LocaleSwitch from '~/components/LocaleSwitch'
-
-let mouseEnterTimer = null
-let mouseLeaveTimer = null
+import Dropdown from '~/components/Dropdown'
 
 export default {
   components: {
+    Dropdown,
     LocaleSwitch
   },
-  data() {
-    return {
-      isPopoverOpen: false
-    }
-  },
   computed: {
     ...mapGetters({
       user: 'auth/user',
@@ -116,34 +108,9 @@ export default {
       return routes
     }
   },
-  beforeDestroy() {
-    clearTimeout(mouseEnterTimer)
-    clearTimeout(mouseLeaveTimer)
-  },
   methods: {
-    toggleMenu() {
-      this.isPopoverOpen = !this.isPopoverOpen
-    },
     isExact(url) {
       return this.$route.path.indexOf(url) === 0
-    },
-    popoverMouseEnter() {
-      clearTimeout(mouseEnterTimer)
-      clearTimeout(mouseLeaveTimer)
-      if (!this.isPopoverOpen) {
-        mouseEnterTimer = setTimeout(() => {
-          this.isPopoverOpen = true
-        }, 500)
-      }
-    },
-    popoveMouseLeave() {
-      clearTimeout(mouseEnterTimer)
-      clearTimeout(mouseLeaveTimer)
-      if (this.isPopoverOpen) {
-        mouseLeaveTimer = setTimeout(() => {
-          this.isPopoverOpen = false
-        }, 300)
-      }
     }
   }
 }