public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(sider): default collapsed value

Browse Source
This commit is contained in:
Corentin Thomasset 2022-04-23 00:43:42 +02:00
parent b12cbe4124
commit b22aa941f5
No known key found for this signature in database
GPG Key ID: DBD997E935996158
1 changed files with 4 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/stores/style.store.ts
View File

@ -1,22 +1,14 @@
import { useMediaQuery, useStorage, whenever } from '@vueuse/core'; import { useMediaQuery, useStorage } from '@vueuse/core';
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import type { Ref } from 'vue'; import { watch, type Ref } from 'vue';
export const useStyleStore = defineStore('style', { export const useStyleStore = defineStore('style', {
state: () => { state: () => {
const isDarkTheme = useStorage('isDarkTheme', true) as Ref<boolean>; const isDarkTheme = useStorage('isDarkTheme', true) as Ref<boolean>;
const isSmallScreen = useMediaQuery('(max-width: 700px)'); 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( watch(isSmallScreen, (v) => (isMenuCollapsed.value = v));
() => !isSmallScreen.value,
() => (isMenuCollapsed.value = false),
);
whenever(
() => isSmallScreen.value,
() => (isMenuCollapsed.value = true),
);
return { return {
isDarkTheme, isDarkTheme,