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()
|
const route = useRoute()
|
||||||
|
|
||||||
// hide menu on mobile
|
|
||||||
watch(() => route.fullPath, () => window.innerWidth < 769 && baseStore.setMenuActive(false))
|
|
||||||
|
|
||||||
// FIXME: this is really error prone
|
// FIXME: this is really error prone
|
||||||
// Reset the current list highlight in menu if the current route is not list related.
|
// Reset the current list highlight in menu if the current route is not list related.
|
||||||
watch(() => route.name as string, (routeName) => {
|
watch(() => route.name as string, (routeName) => {
|
||||||
|
|
|
@ -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 ListService from '../services/list'
|
||||||
import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
|
import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
|
||||||
|
|
||||||
|
import {useMenuActive} from '@/composables/useMenuActive'
|
||||||
|
|
||||||
import {useAuthStore} from '@/stores/auth'
|
import {useAuthStore} from '@/stores/auth'
|
||||||
import type {IList} from '@/modelTypes/IList'
|
import type {IList} from '@/modelTypes/IList'
|
||||||
import { useStorage, useWindowSize, whenever } from '@vueuse/core'
|
|
||||||
|
|
||||||
export const useBaseStore = defineStore('base', () => {
|
export const useBaseStore = defineStore('base', () => {
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
|
@ -24,22 +25,10 @@ export const useBaseStore = defineStore('base', () => {
|
||||||
const blurHash = ref('')
|
const blurHash = ref('')
|
||||||
|
|
||||||
const hasTasks = ref(false)
|
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 keyboardShortcutsActive = ref(false)
|
||||||
const quickActionsActive = ref(false)
|
const quickActionsActive = ref(false)
|
||||||
const logoVisible = ref(true)
|
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) {
|
function setLoading(newLoading: boolean) {
|
||||||
loading.value = newLoading
|
loading.value = newLoading
|
||||||
}
|
}
|
||||||
|
@ -65,19 +54,6 @@ export const useBaseStore = defineStore('base', () => {
|
||||||
hasTasks.value = newHasTasks
|
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) {
|
function setKeyboardShortcutsActive(value: boolean) {
|
||||||
keyboardShortcutsActive.value = value
|
keyboardShortcutsActive.value = value
|
||||||
}
|
}
|
||||||
|
@ -156,18 +132,14 @@ export const useBaseStore = defineStore('base', () => {
|
||||||
background: readonly(background),
|
background: readonly(background),
|
||||||
blurHash: readonly(blurHash),
|
blurHash: readonly(blurHash),
|
||||||
hasTasks: readonly(hasTasks),
|
hasTasks: readonly(hasTasks),
|
||||||
menuActive: readonly(menuActive),
|
|
||||||
keyboardShortcutsActive: readonly(keyboardShortcutsActive),
|
keyboardShortcutsActive: readonly(keyboardShortcutsActive),
|
||||||
quickActionsActive: readonly(quickActionsActive),
|
quickActionsActive: readonly(quickActionsActive),
|
||||||
logoVisible: readonly(logoVisible),
|
logoVisible: readonly(logoVisible),
|
||||||
windowSize: readonly(windowSize),
|
|
||||||
|
|
||||||
setLoading,
|
setLoading,
|
||||||
setReady,
|
setReady,
|
||||||
setCurrentList,
|
setCurrentList,
|
||||||
setHasTasks,
|
setHasTasks,
|
||||||
setMenuActive,
|
|
||||||
toggleMenu,
|
|
||||||
setKeyboardShortcutsActive,
|
setKeyboardShortcutsActive,
|
||||||
setQuickActionsActive,
|
setQuickActionsActive,
|
||||||
setBackground,
|
setBackground,
|
||||||
|
@ -176,6 +148,8 @@ export const useBaseStore = defineStore('base', () => {
|
||||||
|
|
||||||
handleSetCurrentList,
|
handleSetCurrentList,
|
||||||
loadApp,
|
loadApp,
|
||||||
|
|
||||||
|
...useMenuActive(),
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue