1
0

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

This commit is contained in:
David Angel
2023-02-01 22:32:44 -05:00
committed by Dominik Pschenitschni
parent 3604cb3ec7
commit 99dc5cf34f
2 changed files with 22 additions and 15 deletions

View File

@ -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,