Move list edit/namespace to separate pages and in a menu (#397)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/397
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/components/home/navigation.vue

@@ -64,25 +64,7 @@
 							{{ n.title }} ({{ n.lists.filter(l => !l.isArchived).length }})
 						</span>
 					</label>
-					<div class="actions">
-						<router-link
-							:key="n.id + 'list.create'"
-							:to="{ name: 'list.create', params: { id: n.id} }"
-							v-if="n.id > 0"
-							v-tooltip="'Add a new list in the ' + n.title + ' namespace'">
-							<span class="icon">
-								<icon icon="plus"/>
-							</span>
-						</router-link>
-						<router-link
-							:to="{name: 'namespace.edit', params: {id: n.id} }"
-							v-if="n.id > 0"
-							v-tooltip="'Settings'">
-							<span class="icon">
-								<icon icon="cog"/>
-							</span>
-						</router-link>
-					</div>
+					<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
 				</div>
 				<input
 					:id="n.id + 'checker'"
@@ -118,6 +100,7 @@
 										<icon :icon="['far', 'star']" v-else/>
 									</span>
 								</router-link>
+								<list-settings-dropdown :list="l"/>
 							</li>
 						</template>
 					</ul>
@@ -134,9 +117,15 @@
 <script>
 import {mapState} from 'vuex'
 import {CURRENT_LIST, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutation-types'
+import ListSettingsDropdown from '@/components/list/list-settings-dropdown'
+import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
 
 export default {
 	name: 'navigation',
+	components: {
+		ListSettingsDropdown,
+		NamespaceSettingsDropdown,
+	},
 	computed: mapState({
 		namespaces(state) {
 			return state.namespaces.namespaces.filter(n => !n.isArchived)

src/components/home/topNavigation.vue

@@ -31,58 +31,49 @@
 				class="title">
 				{{ currentList.title === '' ? 'Loading...' : currentList.title }}
 			</h1>
-			<router-link
-				:to="{ name: 'list.edit', params: { id: currentList.id } }"
-				class="icon"
-				v-if="canWriteCurrentList">
-				<icon icon="cog" size="2x"/>
-			</router-link>
+
+			<list-settings-dropdown v-if="canWriteCurrentList" :list="currentList"/>
 		</div>
+
 		<div class="navbar-end">
 			<update/>
 			<div class="user">
 				<img :src="userAvatar" alt="" class="avatar"/>
-				<div class="dropdown is-right is-active">
-					<div class="dropdown-trigger">
-						<x-button 
-							@click.stop="userMenuActive = !userMenuActive"
-							type="secondary" 
+				<dropdown class="is-right">
+					<template v-slot:trigger>
+						<x-button
+							type="secondary"
 							:shadow="false">
 							<span class="username">{{ userInfo.name !== '' ? userInfo.name : userInfo.username }}</span>
 							<span class="icon is-small">
 								<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>
@@ -93,21 +84,16 @@ import {mapState} from 'vuex'
 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,