From 38be23e3fce449f2b69cab5296f6afb3f5d18bd2 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Fri, 26 May 2023 18:05:15 +0800
Subject: [PATCH] toggle

---
 .../Home/content/aside/MainPageAside.vue      | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/views/Home/content/aside/MainPageAside.vue b/src/views/Home/content/aside/MainPageAside.vue
index 6f6b36d7..bd1dbe4c 100644
--- a/src/views/Home/content/aside/MainPageAside.vue
+++ b/src/views/Home/content/aside/MainPageAside.vue
@@ -2,25 +2,28 @@
 // 导入图标
 import { Icon } from '@iconify/vue'
 // 导入 Vue 函数
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import AsideActive from './components/AsideActive.vue'
 
 import Aside from './components/Aside.vue'
 
 // 用户点击折叠左侧区域
-// localStorage.setItem('KUNGalgameMainPageAsideBar', 'true')
-// const asideBarStatus =
-//   localStorage.getItem('KUNGalgameMainPageAsideBar') || true
-const isActive = ref(false)
-const asideWidth = ref('40px')
-const handleFold = () => {
-  if (isActive.value) {
-    asideWidth.value = '40px'
+const asideBarStatus = (): boolean => {
+  if (localStorage.getItem('KUNGalgame-main-page-aside') === 'true') {
+    return true
   } else {
-    asideWidth.value = '240px'
+    return false
   }
+}
+
+const isActive = ref<boolean>(asideBarStatus())
+const asideWidth = isActive.value ? '40px' : '240px'
+const handleFold = () => {
   isActive.value = !isActive.value
 }
+watch(isActive, () => {
+  localStorage.setItem('KUNGalgame-main-page-aside', isActive.value.toString())
+})
 </script>
 
 <template>