From aa01a9227846ac56ffa4dcdc4a494ea8fb449997 Mon Sep 17 00:00:00 2001
From: David Angel <david@davidangel.net>
Date: Wed, 25 Jan 2023 23:02:22 -0500
Subject: [PATCH 1/4] Persist menuActive state in Local Storage

---
 src/stores/base.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/stores/base.ts b/src/stores/base.ts
index 7e9c6d71b..970e7a69b 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -9,6 +9,7 @@ import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
 
 import {useAuthStore} from '@/stores/auth'
 import type {IList} from '@/modelTypes/IList'
+import { useStorage } from '@vueuse/core'
 
 export const useBaseStore = defineStore('base', () => {
 	const loading = ref(false)
@@ -23,7 +24,7 @@ export const useBaseStore = defineStore('base', () => {
 	const blurHash = ref('')
 
 	const hasTasks = ref(false)
-	const menuActive = ref(true)
+	const menuActive = useStorage('menuActive', true)
 	const keyboardShortcutsActive = ref(false)
 	const quickActionsActive = ref(false)
 	const logoVisible = ref(true)
@@ -53,10 +54,6 @@ export const useBaseStore = defineStore('base', () => {
 		hasTasks.value = newHasTasks
 	}
 
-	function setMenuActive(newMenuActive: boolean) {
-		menuActive.value = newMenuActive
-	}
-
 	function toggleMenu() {
 		menuActive.value = !menuActive.value
 	}
@@ -147,7 +144,6 @@ export const useBaseStore = defineStore('base', () => {
 		setLoading,
 		setCurrentList,
 		setHasTasks,
-		setMenuActive,
 		toggleMenu,
 		setKeyboardShortcutsActive,
 		setQuickActionsActive,

From 3604cb3ec79a6fd5f9bfd9d675ba02cde21e7640 Mon Sep 17 00:00:00 2001
From: David Angel <david@davidangel.net>
Date: Wed, 25 Jan 2023 23:23:37 -0500
Subject: [PATCH 2/4] Solve for resize()

---
 src/components/home/navigation.vue | 2 +-
 src/stores/base.ts                 | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index 333d668c1..be9167b23 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -208,7 +208,7 @@ const listStore = useListStore()
 
 function resize() {
 	// Hide the menu by default on mobile
-	baseStore.setMenuActive(window.innerWidth >= 770)
+	baseStore.menuActive && baseStore.setMenuActive(window.innerWidth >= 770)
 }
 
 function toggleLists(namespaceId: INamespace['id']) {
diff --git a/src/stores/base.ts b/src/stores/base.ts
index 970e7a69b..2fa35c1fc 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -54,6 +54,10 @@ export const useBaseStore = defineStore('base', () => {
 		hasTasks.value = newHasTasks
 	}
 
+	function setMenuActive(newMenuActive: boolean) {
+		menuActive.value = newMenuActive
+	}
+
 	function toggleMenu() {
 		menuActive.value = !menuActive.value
 	}
@@ -144,6 +148,7 @@ export const useBaseStore = defineStore('base', () => {
 		setLoading,
 		setCurrentList,
 		setHasTasks,
+		setMenuActive,
 		toggleMenu,
 		setKeyboardShortcutsActive,
 		setQuickActionsActive,

From 99dc5cf34f02de7eb7f56abc31b015796312d0b8 Mon Sep 17 00:00:00 2001
From: David Angel <david@davidangel.net>
Date: Wed, 1 Feb 2023 22:32:44 -0500
Subject: [PATCH 3/4] Refactor to only used local storage value when on desktop
 viewport widths

---
 src/components/home/navigation.vue | 12 +-----------
 src/stores/base.ts                 | 25 +++++++++++++++++++++----
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index be9167b23..5ce4984fc 100644
--- a/src/components/home/navigation.vue
+++ b/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]
 }
diff --git a/src/stores/base.ts b/src/stores/base.ts
index 2fa35c1fc..11283656e 100644
--- a/src/stores/base.ts
+++ b/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,

From c502f9b840ee2d65193aa4ef29c7f260b49db0d2 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 8 Feb 2023 12:56:32 +0100
Subject: [PATCH 4/4] feat: refactor to composable

- using useMediaQuery and useLocalStorage
- remove watcher in contentAuth
---
 src/components/home/contentAuth.vue |  3 --
 src/composables/useMenuActive.ts    | 47 +++++++++++++++++++++++++++++
 src/stores/base.ts                  | 34 +++------------------
 3 files changed, 51 insertions(+), 33 deletions(-)
 create mode 100644 src/composables/useMenuActive.ts

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index d8315dec6..02e05be2f 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -86,9 +86,6 @@ function showKeyboardShortcuts() {
 
 const route = useRoute()
 
-// hide menu on mobile
-watch(() => route.fullPath, () => window.innerWidth < 769 && baseStore.setMenuActive(false))
-
 // FIXME: this is really error prone
 // Reset the current list highlight in menu if the current route is not list related.
 watch(() => route.name as string, (routeName) => {
diff --git a/src/composables/useMenuActive.ts b/src/composables/useMenuActive.ts
new file mode 100644
index 000000000..cfeed2ca1
--- /dev/null
+++ b/src/composables/useMenuActive.ts
@@ -0,0 +1,47 @@
+import {ref, watch, readonly} from 'vue'
+import {useLocalStorage, useMediaQuery} from '@vueuse/core'
+
+const BULMA_MOBILE_BREAKPOINT = 768
+
+export function useMenuActive() {
+	const isMobile = useMediaQuery(`(max-width: ${BULMA_MOBILE_BREAKPOINT}px)`)
+
+	const desktopPreference = useLocalStorage(
+		'menuActiveDesktopPreference',
+		true,
+		// If we have two tabs open we want to be able to have the menu open in one window
+		// and closed in the other. The last changed value will be the new preference
+		{listenToStorageChanges: false},
+	)
+
+	const menuActive = ref(false)
+	
+	// set to prefered value
+	watch(isMobile, (current) => {
+		menuActive.value = current
+			// On mobile we don't show the menu in an expanded state
+			// because that would hide the main content
+			? false
+			: desktopPreference.value
+	}, {immediate: true})
+
+	watch(menuActive, (current) => {
+		if (!isMobile.value) {
+			desktopPreference.value = current
+		}
+	})
+
+	function setMenuActive(newMenuActive: boolean) {
+		menuActive.value = newMenuActive
+	}
+
+	function toggleMenu() {
+		menuActive.value = menuActive.value = !menuActive.value
+	}
+
+	return {
+		menuActive: readonly(menuActive),
+		setMenuActive,
+		toggleMenu,
+	}
+}
\ No newline at end of file
diff --git a/src/stores/base.ts b/src/stores/base.ts
index 11283656e..e59ad45e7 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -7,9 +7,10 @@ import ListModel from '@/models/list'
 import ListService from '../services/list'
 import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
 
+import {useMenuActive} from '@/composables/useMenuActive'
+
 import {useAuthStore} from '@/stores/auth'
 import type {IList} from '@/modelTypes/IList'
-import { useStorage, useWindowSize, whenever } from '@vueuse/core'
 
 export const useBaseStore = defineStore('base', () => {
 	const loading = ref(false)
@@ -24,22 +25,10 @@ export const useBaseStore = defineStore('base', () => {
 	const blurHash = ref('')
 
 	const hasTasks = ref(false)
-	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
 	}
@@ -65,19 +54,6 @@ export const useBaseStore = defineStore('base', () => {
 		hasTasks.value = newHasTasks
 	}
 
-	function setMenuActive(newMenuActive: boolean) {
-		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) {
 		keyboardShortcutsActive.value = value
 	}
@@ -156,18 +132,14 @@ export const useBaseStore = defineStore('base', () => {
 		background: readonly(background),
 		blurHash: readonly(blurHash),
 		hasTasks: readonly(hasTasks),
-		menuActive: readonly(menuActive),
 		keyboardShortcutsActive: readonly(keyboardShortcutsActive),
 		quickActionsActive: readonly(quickActionsActive),
 		logoVisible: readonly(logoVisible),
-		windowSize: readonly(windowSize),
 
 		setLoading,
 		setReady,
 		setCurrentList,
 		setHasTasks,
-		setMenuActive,
-		toggleMenu,
 		setKeyboardShortcutsActive,
 		setQuickActionsActive,
 		setBackground,
@@ -176,6 +148,8 @@ export const useBaseStore = defineStore('base', () => {
 
 		handleSetCurrentList,
 		loadApp,
+
+		...useMenuActive(),
 	}
 })