Refactor app component (#283)

Fix redirect to home

Move redirect to home to no auth component

Move setup stuff to separate functions

Renew token in authenticated component

Use vue's router object

Move auth type checks to computed properties

Move after route stuff to authenticated content component

More Cleanup

Cleanup

Hide the navigation on mobile in the navigation component

Load namespaces from inside the navigation component

Fix logout

Move not authenticated content to separate component

Fix favoriting lists

Move link share authenticated stuff to separate component

Move authenticated stuff to separate component

Move side navigation to separate component

Move top navigation bar to separate component

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

src/components/home/topNavigation.vue

@@ -0,0 +1,125 @@
+<template>
+	<nav
+		:class="{'has-background': background}"
+		aria-label="main navigation"
+		class="navbar main-theme is-fixed-top"
+		role="navigation"
+	>
+		<div class="navbar-brand">
+			<router-link :to="{name: 'home'}" class="navbar-item logo">
+				<img alt="Vikunja" src="/images/logo-full-pride.svg" v-if="(new Date()).getMonth() === 5"/>
+				<img alt="Vikunja" src="/images/logo-full.svg" v-else/>
+			</router-link>
+			<a
+				@click="$store.commit('toggleMenu')"
+				class="menu-show-button"
+				@shortkey="() => $store.commit('toggleMenu')"
+				v-shortkey="['ctrl', 'e']"
+			>
+				<icon icon="bars"></icon>
+			</a>
+		</div>
+		<a
+			@click="$store.commit('toggleMenu')"
+			class="menu-show-button"
+		>
+			<icon icon="bars"></icon>
+		</a>
+		<div class="list-title" v-if="currentList.id">
+			<h1
+				:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
+				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>
+		</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">
+						<button @click.stop="userMenuActive = !userMenuActive" class="button noshadow">
+							<span class="username">{{ userInfo.username }}</span>
+							<span class="icon is-small">
+									<icon icon="chevron-down"/>
+								</span>
+						</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="keyboardShortcutsActive = true" class="dropdown-item">Keyboard
+									Shortcuts</a>
+								<a @click="logout()" class="dropdown-item">
+									Logout
+								</a>
+							</div>
+						</div>
+					</transition>
+				</div>
+			</div>
+		</div>
+	</nav>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import {CURRENT_LIST} from '@/store/mutation-types'
+import Rights from '@/models/rights.json'
+import Update from '@/components/home/update'
+
+export default {
+	name: 'topNavigation',
+	data() {
+		return {
+			userMenuActive: false,
+		}
+	},
+	components: {
+		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,
+		userAuthenticated: state => state.auth.authenticated,
+		currentList: CURRENT_LIST,
+		background: 'background',
+		imprintUrl: state => state.config.legal.imprintUrl,
+		privacyPolicyUrl: state => state.config.legal.privacyPolicyUrl,
+		canWriteCurrentList: state => state.currentList.maxRight > Rights.READ,
+	}),
+	methods: {
+		logout() {
+			this.$store.dispatch('auth/logout')
+			this.$router.push({name: 'user.login'})
+		},
+	},
+}
+</script>