fix: top navigation not usable

src/components/home/contentAuth.vue

@@ -1,9 +1,9 @@
 <template>
-	<div>
+	<div class="content-auth" :class="{'modal-active': modalActive}">
 		<BaseButton
 			v-if="menuActive"
 			@click="$store.commit('menuActive', false)"
-			class="menu-hide-button" 
+			class="menu-hide-button"
 		>
 			<icon icon="times"/>
 		</BaseButton>
@@ -41,12 +41,12 @@
 
 				<transition name="modal">
 					<modal
-						v-if="currentModal" 
+						v-if="currentModal"
 						@close="closeModal()"
 						variant="scrolling"
 						class="task-detail-view-modal"
 					>
-						<component :is="currentModal" />
+						<component :is="currentModal"/>
 					</modal>
 				</transition>
 
@@ -119,17 +119,17 @@ function useRouteWithModal() {
 		}
 	}
 
-	return { routeWithModal, currentModal, closeModal }
+	return {routeWithModal, currentModal, closeModal}
 }
 
-const { routeWithModal, currentModal, closeModal } = useRouteWithModal()
+const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
-
 
 const store = useStore()
 
 const background = computed(() => store.state.background)
 const blurHash = computed(() => store.state.blurHash)
 const menuActive = computed(() => store.state.menuActive)
+const modalActive = computed(() => store.state.modalActive)
 
 function showKeyboardShortcuts() {
 	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true)
@@ -238,15 +238,15 @@ store.dispatch('labels/loadAllLabels')
 		padding-top: $navbar-height;
 	}
 
-  .app-content {
+	.app-content {
-    padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
+		padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
-	z-index: 10;
+		z-index: 10;
-	position: relative;
+		position: relative;
 
-	// Used to make sure the spinner is always in the middle while loading
+		// Used to make sure the spinner is always in the middle while loading
-	> .loader-container {
+		> .loader-container {
-      min-height: calc(100vh -  #{$navbar-height + 1.5rem + 1rem});
+			min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem});
-	}
+		}
 
 		@media screen and (max-width: $tablet) {
 			margin-left: 0;
@@ -263,10 +263,10 @@ store.dispatch('labels/loadAllLabels')
 			}
 		}
 
-    .card {
+		.card {
-      background: var(--white);
+			background: var(--white);
-    }
+		}
-  }
+	}
 }
 
 .mobile-overlay {
@@ -303,5 +303,14 @@ store.dispatch('labels/loadAllLabels')
 	}
 }
 
+.content-auth {
+	position: relative;
+	z-index: 1;
+
+	&.modal-active {
+		z-index: unset;
+	}
+}
+
 @include modal-transition();
 </style>

src/components/modal/modal.vue

@@ -64,6 +64,9 @@
 import BaseButton from '@/components/base/BaseButton.vue'
 import {ref, watch} from 'vue'
 import {useScrollLock} from '@vueuse/core'
+import {useStore} from 'vuex'
+
+const store = useStore()
 
 const props = withDefaults(defineProps<{
 	enabled?: boolean,
@@ -86,6 +89,7 @@ watch(
 	() => props.enabled,
 	enabled => {
 		scrollLock.value = enabled
+		store.commit('modalActive', enabled)
 	},
 	{
 		immediate: true,

src/store/index.js

@@ -51,6 +51,7 @@ export const store = createStore({
 		menuActive: true,
 		keyboardShortcutsActive: false,
 		quickActionsActive: false,
+		modalActive: false,
 	},
 	mutations: {
 		[LOADING](state, loading) {
@@ -89,8 +90,8 @@ export const store = createStore({
 		[BLUR_HASH](state, blurHash) {
 			state.blurHash = blurHash
 		},
-		vikunjaReady(state, ready) {
+		modalActive(state, active) {
-			state.vikunjaReady = ready
+			state.modalActive = active
 		},
 	},
 	actions: {