frontend/src/components/home/navigation.vue

<template>
	<aside
		:class="{'is-active': baseStore.menuActive}"
		class="menu-container"
	>
		<nav class="menu top-menu">
			<router-link
				:to="{name: 'home'}"
				class="logo"
			>
				<Logo
					width="164"
					height="48"
				/>
			</router-link>
			<menu class="menu-list other-menu-items">
				<li>
					<router-link
						v-shortcut="'g o'"
						:to="{ name: 'home'}"
					>
						<span class="menu-item-icon icon">
							<icon icon="calendar" />
						</span>
						{{ $t('navigation.overview') }}
					</router-link>
				</li>
				<li>
					<router-link
						v-shortcut="'g u'"
						:to="{ name: 'tasks.range'}"
					>
						<span class="menu-item-icon icon">
							<icon :icon="['far', 'calendar-alt']" />
						</span>
						{{ $t('navigation.upcoming') }}
					</router-link>
				</li>
				<li>
					<router-link
						v-shortcut="'g p'"
						:to="{ name: 'projects.index'}"
					>
						<span class="menu-item-icon icon">
							<icon icon="layer-group" />
						</span>
						{{ $t('project.projects') }}
					</router-link>
				</li>
				<li>
					<router-link
						v-shortcut="'g a'"
						:to="{ name: 'labels.index'}"
					>
						<span class="menu-item-icon icon">
							<icon icon="tags" />
						</span>
						{{ $t('label.title') }}
					</router-link>
				</li>
				<li>
					<router-link
						v-shortcut="'g m'"
						:to="{ name: 'teams.index'}"
					>
						<span class="menu-item-icon icon">
							<icon icon="users" />
						</span>
						{{ $t('team.title') }}
					</router-link>
				</li>
			</menu>
		</nav>

		<Loading
			v-if="projectStore.isLoading"
			variant="small"
		/>
		<template v-else>
			<nav
				v-if="favoriteProjects"
				class="menu"
			>
				<ProjectsNavigation
					:model-value="favoriteProjects" 
					:can-edit-order="false"
					:can-collapse="false"
				/>
			</nav>
			
			<nav
				v-if="savedFilterProjects"
				class="menu"
			>
				<ProjectsNavigation
					:model-value="savedFilterProjects"
					:can-edit-order="false"
					:can-collapse="false"
				/>
			</nav>

			<nav class="menu">
				<ProjectsNavigation
					:model-value="projects"
					:can-edit-order="true"
					:can-collapse="true"
					:level="1"
				/>
			</nav>
		</template>

		<PoweredByLink />
	</aside>
</template>

<script setup lang="ts">
import {computed} from 'vue'

import PoweredByLink from '@/components/home/PoweredByLink.vue'
import Logo from '@/components/home/Logo.vue'
import Loading from '@/components/misc/loading.vue'

import {useBaseStore} from '@/stores/base'
import {useProjectStore} from '@/stores/projects'
import ProjectsNavigation from '@/components/home/ProjectsNavigation.vue'

const baseStore = useBaseStore()
const projectStore = useProjectStore()

const projects = computed(() => projectStore.notArchivedRootProjects)
const favoriteProjects = computed(() => projectStore.favoriteProjects)
const savedFilterProjects = computed(() => projectStore.savedFilterProjects)
</script>

<style lang="scss" scoped>
.logo {
	display: block;

	padding-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 1rem;

	@media screen and (min-width: $tablet) {
		display: none;
	}
}

.menu-container {
	background: var(--site-background);
	color: $vikunja-nav-color;
	padding: 1rem 0;
	transition: transform $transition-duration ease-in;
	position: fixed;
	top: $navbar-height;
	bottom: 0;
	left: 0;
	transform: translateX(-100%);
	overflow-x: auto;
	width: $navbar-width;

	@media screen and (max-width: $tablet) {
		top: 0;
		width: 70vw;
		z-index: 20;
	}

	&.is-active {
		transform: translateX(0);
		transition: transform $transition-duration ease-out;
	}
}

.top-menu .menu-list {
	li {
		font-weight: 600;
		font-family: $vikunja-font;
	}

	.list-menu-link,
	li > a {
		padding-left: 2rem;
		display: inline-block;

		.icon {
			padding-bottom: .25rem;
		}
	}
}

.menu + .menu {
	padding-top: math.div($navbar-padding, 2);
}
</style>