mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-24 16:56:14 -04:00
fix(sider): default collapsed value
This commit is contained in:
parent
b12cbe4124
commit
b22aa941f5
1 changed files with 4 additions and 12 deletions
|
@ -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<boolean>;
|
||||
const isSmallScreen = useMediaQuery('(max-width: 700px)');
|
||||
const isMenuCollapsed = useStorage('isMenuCollapsed', !isSmallScreen.value) as Ref<boolean>;
|
||||
const isMenuCollapsed = useStorage('isMenuCollapsed', isSmallScreen.value) as Ref<boolean>;
|
||||
|
||||
whenever(
|
||||
() => !isSmallScreen.value,
|
||||
() => (isMenuCollapsed.value = false),
|
||||
);
|
||||
|
||||
whenever(
|
||||
() => isSmallScreen.value,
|
||||
() => (isMenuCollapsed.value = true),
|
||||
);
|
||||
watch(isSmallScreen, (v) => (isMenuCollapsed.value = v));
|
||||
|
||||
return {
|
||||
isDarkTheme,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue