From b22aa941f52009118d4d3cc98277cc4c402a4c77 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Sat, 23 Apr 2022 00:43:42 +0200
Subject: [PATCH] fix(sider): default collapsed value

---
 src/stores/style.store.ts | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

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<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,