Move top navigation user dropdown to dropdown componetn

src/components/home/topNavigation.vue

@@ -39,10 +39,9 @@
 			<update/>
 			<div class="user">
 				<img :src="userAvatar" alt="" class="avatar"/>
-				<div class="dropdown is-right is-active">
-					<div class="dropdown-trigger">
+				<dropdown class="is-right">
+					<template v-slot:trigger>
 						<x-button
-							@click.stop="userMenuActive = !userMenuActive"
 							type="secondary"
 							:shadow="false">
 							<span class="username">{{ userInfo.name !== '' ? userInfo.name : userInfo.username }}</span>
@@ -50,36 +49,31 @@
 								<icon icon="chevron-down"/>
 							</span>
 						</x-button>
-					</div>
-					<transition name="fade">
-						<div class="dropdown-menu" v-if="userMenuActive">
-							<div class="dropdown-content">
-								<router-link :to="{name: 'user.settings'}" class="dropdown-item">
-									Settings
-								</router-link>
-								<a
-									:href="imprintUrl"
-									class="dropdown-item"
-									target="_blank"
-									v-if="imprintUrl">
-									Imprint
-								</a>
-								<a
-									:href="privacyPolicyUrl"
-									class="dropdown-item"
-									target="_blank"
-									v-if="privacyPolicyUrl">
-									Privacy policy
-								</a>
-								<a @click="$store.commit('keyboardShortcutsActive', true)" class="dropdown-item">Keyboard
-									Shortcuts</a>
-								<a @click="logout()" class="dropdown-item">
-									Logout
-								</a>
-							</div>
-						</div>
-					</transition>
-				</div>
+					</template>
+
+					<router-link :to="{name: 'user.settings'}" class="dropdown-item">
+						Settings
+					</router-link>
+					<a
+						:href="imprintUrl"
+						class="dropdown-item"
+						target="_blank"
+						v-if="imprintUrl">
+						Imprint
+					</a>
+					<a
+						:href="privacyPolicyUrl"
+						class="dropdown-item"
+						target="_blank"
+						v-if="privacyPolicyUrl">
+						Privacy policy
+					</a>
+					<a @click="$store.commit('keyboardShortcutsActive', true)" class="dropdown-item">Keyboard
+						Shortcuts</a>
+					<a @click="logout()" class="dropdown-item">
+						Logout
+					</a>
+				</dropdown>
 			</div>
 		</div>
 	</nav>
@@ -91,22 +85,15 @@ import {CURRENT_LIST} from '@/store/mutation-types'
 import Rights from '@/models/rights.json'
 import Update from '@/components/home/update'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown'
+import Dropdown from '@/components/misc/dropdown'
 
 export default {
 	name: 'topNavigation',
-	data() {
-		return {
-			userMenuActive: false,
-		}
-	},
 	components: {
+		Dropdown,
 		ListSettingsDropdown,
 		Update,
 	},
-	created() {
-		// This will hide the menu once clicked outside of it
-		this.$nextTick(() => document.addEventListener('click', () => this.userMenuActive = false))
-	},
 	computed: mapState({
 		userInfo: state => state.auth.info,
 		userAvatar: state => state.auth.avatarUrl,

src/components/misc/dropdown.vue

@@ -1,7 +1,9 @@
 <template>
 	<div class="dropdown is-right is-active" ref="dropdown">
-		<div class="dropdown-trigger">
-			<icon :icon="triggerIcon" @click="open = !open" class="icon"/>
+		<div class="dropdown-trigger" @click="open = !open">
+			<slot name="trigger">
+				<icon :icon="triggerIcon" class="icon"/>
+			</slot>
 		</div>
 		<transition name="fade">
 			<div class="dropdown-menu" v-if="open">