forked from vikunja/frontend
feat: refactor to composable
- using useMediaQuery and useLocalStorage - remove watcher in contentAuth
This commit is contained in:
parent
99dc5cf34f
commit
c502f9b840
|
@ -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) => {
|
||||
|
|
47
src/composables/useMenuActive.ts
Normal file
47
src/composables/useMenuActive.ts
Normal file
|
@ -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,
|
||||
}
|
||||
}
|
|
@ -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(),
|
||||
}
|
||||
})
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user