src/stores/style.store.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { useMediaQuery, useStorage } from '@vueuse/core';
import { defineStore } from 'pinia';
import { watch, type Ref } from 'vue';

export const useStyleStore = defineStore('style', {
  state: () => {
    const isDarkTheme = useStorage('isDarkTheme', true) as Ref<boolean>;
    const isSmallScreen = useMediaQuery('(max-width: 700px)');
    const isMenuCollapsed = useStorage('isMenuCollapsed', isSmallScreen.value) as Ref<boolean>;

    watch(isSmallScreen, (v) => (isMenuCollapsed.value = v));

    return {
      isDarkTheme,
      isMenuCollapsed,
      isSmallScreen,
    };
  },
});