diff --git a/src/stores/style.store.ts b/src/stores/style.store.ts index af1d1b99..bd6559a7 100644 --- a/src/stores/style.store.ts +++ b/src/stores/style.store.ts @@ -1,22 +1,14 @@ -import { useMediaQuery, useStorage, whenever } from '@vueuse/core'; +import { useMediaQuery, useStorage } from '@vueuse/core'; import { defineStore } from 'pinia'; -import type { Ref } from 'vue'; +import { watch, type Ref } from 'vue'; export const useStyleStore = defineStore('style', { state: () => { const isDarkTheme = useStorage('isDarkTheme', true) as Ref; const isSmallScreen = useMediaQuery('(max-width: 700px)'); - const isMenuCollapsed = useStorage('isMenuCollapsed', !isSmallScreen.value) as Ref; + const isMenuCollapsed = useStorage('isMenuCollapsed', isSmallScreen.value) as Ref; - whenever( - () => !isSmallScreen.value, - () => (isMenuCollapsed.value = false), - ); - - whenever( - () => isSmallScreen.value, - () => (isMenuCollapsed.value = true), - ); + watch(isSmallScreen, (v) => (isMenuCollapsed.value = v)); return { isDarkTheme,