Refactor to only used local storage value when on desktop viewport widths

src/components/home/navigation.vue

@@ -146,7 +146,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed, onMounted, onBeforeMount} from 'vue'
+import {ref, computed, onBeforeMount} from 'vue'
 import draggable from 'zhyswan-vuedraggable'
 import type {SortableEvent} from 'sortablejs'
 
@@ -159,7 +159,6 @@ import Logo from '@/components/home/Logo.vue'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
 import {getListTitle} from '@/helpers/getListTitle'
-import {useEventListener} from '@vueuse/core'
 import type {IList} from '@/modelTypes/IList'
 import type {INamespace} from '@/modelTypes/INamespace'
 import ColorBubble from '@/components/misc/colorBubble.vue'
@@ -200,17 +199,8 @@ const namespaceListsCount = computed(() => {
 	return namespaces.value.map((_, index) => activeLists.value[index]?.length ?? 0)
 })
 
-
-useEventListener('resize', resize)
-onMounted(() => resize())
-
 const listStore = useListStore()
 
-function resize() {
-	// Hide the menu by default on mobile
-	baseStore.menuActive && baseStore.setMenuActive(window.innerWidth >= 770)
-}
-
 function toggleLists(namespaceId: INamespace['id']) {
 	listsVisible.value[namespaceId] = !listsVisible.value[namespaceId]
 }

src/stores/base.ts

@@ -1,4 +1,4 @@
-import {readonly, ref} from 'vue'
+import { readonly, ref} from 'vue'
 import {defineStore, acceptHMRUpdate} from 'pinia'
 
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
@@ -9,7 +9,7 @@ import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
 
 import {useAuthStore} from '@/stores/auth'
 import type {IList} from '@/modelTypes/IList'
-import { useStorage } from '@vueuse/core'
+import { useStorage, useWindowSize, whenever } from '@vueuse/core'
 
 export const useBaseStore = defineStore('base', () => {
 	const loading = ref(false)
@@ -24,11 +24,22 @@ export const useBaseStore = defineStore('base', () => {
 	const blurHash = ref('')
 
 	const hasTasks = ref(false)
-	const menuActive = useStorage('menuActive', true)
+	const windowSize = useWindowSize()
+	const menuActivePreference = useStorage('menuActive', true)
+	const menuActive = ref(windowSize.width.value >= 770 && menuActivePreference.value)
 	const keyboardShortcutsActive = ref(false)
 	const quickActionsActive = ref(false)
 	const logoVisible = ref(true)
 
+	whenever(windowSize.width, (value, previous) => {
+		if (value < 770 && previous >= 770) {
+			setMenuActive(false)
+		}
+		if (value >= 770 && previous < 770 && menuActivePreference.value) {
+			setMenuActive(menuActivePreference.value)
+		}
+	})
+
 	function setLoading(newLoading: boolean) {
 		loading.value = newLoading
 	}
@@ -58,8 +69,13 @@ export const useBaseStore = defineStore('base', () => {
 		menuActive.value = newMenuActive
 	}
 
+	function setMenuActivePreference(newMenuActivePreference: boolean) {
+		menuActivePreference.value = newMenuActivePreference
+	}
+
 	function toggleMenu() {
 		menuActive.value = !menuActive.value
+		windowSize.width.value >= 770 && setMenuActivePreference(menuActive.value)
 	}
 
 	function setKeyboardShortcutsActive(value: boolean) {
@@ -144,8 +160,10 @@ export const useBaseStore = defineStore('base', () => {
 		keyboardShortcutsActive: readonly(keyboardShortcutsActive),
 		quickActionsActive: readonly(quickActionsActive),
 		logoVisible: readonly(logoVisible),
+		windowSize: readonly(windowSize),
 
 		setLoading,
+		setReady,
 		setCurrentList,
 		setHasTasks,
 		setMenuActive,
@@ -155,7 +173,6 @@ export const useBaseStore = defineStore('base', () => {
 		setBackground,
 		setBlurHash,
 		setLogoVisible,
-		setReady,
 
 		handleSetCurrentList,
 		loadApp,