From 010eca1d0cb7f38474b5a26ca5e856d4b5a7aab4 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 2 Apr 2022 23:09:28 +0200
Subject: [PATCH] fix: menu on mobile devices

---
 src/components/home/contentAuth.vue |  9 +++++----
 src/components/home/navigation.vue  | 16 ++++++++--------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 30e381821..f62288e28 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content-auth" :class="{'modal-active': modalActive}">
+	<div class="content-auth" :class="{'z-unset': modalActive}">
 		<BaseButton
 			v-if="menuActive"
 			@click="$store.commit('menuActive', false)"
@@ -306,10 +306,11 @@ store.dispatch('labels/loadAllLabels')
 .content-auth {
 	position: relative;
 	z-index: 1;
+}
 
-	&.modal-active {
-		z-index: unset;
-	}
+.is-touch .content-auth,
+.content-auth.z-unset {
+	z-index: unset;
 }
 
 @include modal-transition();
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index bfd65ed50..13194a853 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -160,7 +160,7 @@
 import {ref, computed, onMounted, onBeforeMount} from 'vue'
 import {useStore} from 'vuex'
 import draggable from 'vuedraggable'
-import { SortableEvent } from 'sortablejs'
+import {SortableEvent} from 'sortablejs'
 
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
 import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
@@ -170,7 +170,7 @@ import Logo from '@/components/home/Logo.vue'
 import {MENU_ACTIVE} from '@/store/mutation-types'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
-import { useEventListener } from '@vueuse/core'
+import {useEventListener} from '@vueuse/core'
 import NamespaceModel from '@/models/namespace'
 import ListModel from '@/models/list'
 
@@ -196,7 +196,7 @@ const activeLists = computed(() => {
 		})
 	})
 })
-	
+
 const namespaceTitles = computed(() => {
 	return namespaces.value.map((namespace) => getNamespaceTitle(namespace))
 })
@@ -228,7 +228,7 @@ function toggleLists(namespaceId: number) {
 	listsVisible.value[namespaceId] = !listsVisible.value[namespaceId]
 }
 
-const listsVisible = ref<{ [id: NamespaceModel['id']]: boolean}>({})
+const listsVisible = ref<{ [id: NamespaceModel['id']]: boolean }>({})
 // FIXME: async action will be unfinished when component mounts
 onBeforeMount(async () => {
 	const namespaces = await store.dispatch('namespaces/loadNamespaces') as NamespaceModel[]
@@ -256,13 +256,14 @@ function updateActiveLists(namespace: NamespaceModel, activeLists: ListModel[])
 	})
 }
 
-const listUpdating = ref<{ [id: NamespaceModel['id']]: boolean}>({})
+const listUpdating = ref<{ [id: NamespaceModel['id']]: boolean }>({})
+
 async function saveListPosition(e: SortableEvent) {
 	if (!e.newIndex) return
 
 	const namespaceId = parseInt(e.to.dataset.namespaceId as string)
 	const newNamespaceIndex = parseInt(e.to.dataset.namespaceIndex as string)
-		
+
 	const listsActive = activeLists.value[newNamespaceIndex]
 	const list = listsActive[e.newIndex]
 	const listBefore = listsActive[e.newIndex - 1] ?? null
@@ -294,7 +295,6 @@ $vikunja-nav-color: var(--grey-700);
 $vikunja-nav-selected-width: 0.4rem;
 
 .namespace-container {
-	z-index: 6;
 	background: $vikunja-nav-background;
 	color: $vikunja-nav-color;
 	padding: 0 0 1rem;
@@ -307,10 +307,10 @@ $vikunja-nav-selected-width: 0.4rem;
 	overflow-x: auto;
 	width: $navbar-width;
 
-
 	@media screen and (max-width: $tablet) {
 		top: 0;
 		width: 70vw;
+		z-index: 20;
 	}
 
 	&.is-active {