diff --git a/flask-ui/src/layout/components/Sidebar/index.vue b/flask-ui/src/layout/components/Sidebar/index.vue
index c1c3a3c..1f2fc0a 100644
--- a/flask-ui/src/layout/components/Sidebar/index.vue
+++ b/flask-ui/src/layout/components/Sidebar/index.vue
@@ -1,16 +1,14 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
-import {ref} from "vue";
-
-defineProps<{
-  isCollapse: boolean
-}>()
-
-const iconComponent = ref("location")
+import {useIsCollapseStore} from "@/stores/counter.ts";
+import {storeToRefs} from "pinia";
 
+const isCollapseStore = useIsCollapseStore()
+const {isCollapse} = storeToRefs(isCollapseStore)
 </script>
 
 <template>
-  <el-aside>
+  <el-aside :width="!isCollapse?'200px':'auto'">
     <el-scrollbar>
       <el-menu
         default-active="2"
@@ -47,9 +45,9 @@ const iconComponent = ref("location")
 </template>
 
 <style scoped lang="scss">
-.el-aside {
-  width: 200px;
-}
+//.el-aside {
+//  width: 200px;
+//}
 :deep(.el-menu.el-menu--vertical) {
   min-height: calc(100vh - 60px);
 }
diff --git a/flask-ui/src/layout/index.vue b/flask-ui/src/layout/index.vue
index da01d98..a07a3c0 100644
--- a/flask-ui/src/layout/index.vue
+++ b/flask-ui/src/layout/index.vue
@@ -1,9 +1,12 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
-import {ref} from 'vue'
 import AppMain from "@/layout/components/AppMain.vue"
 import Sidebar from "@/layout/components/Sidebar/index.vue"
+import {useIsCollapseStore} from "@/stores/counter.ts";
+import {storeToRefs} from "pinia";
 
-let isCollapse = ref(false);
+const isCollapseStore = useIsCollapseStore()
+const {isCollapse} = storeToRefs(isCollapseStore)
 </script>
 
 <template>
@@ -17,7 +20,7 @@ let isCollapse = ref(false);
       </template>
     </el-header>
     <el-container>
-      <Sidebar :isCollapse="isCollapse"></Sidebar>
+      <Sidebar></Sidebar>
       <AppMain></AppMain>
     </el-container>
   </el-container>
diff --git a/flask-ui/src/stores/counter.ts b/flask-ui/src/stores/counter.ts
index b6757ba..5be74fd 100644
--- a/flask-ui/src/stores/counter.ts
+++ b/flask-ui/src/stores/counter.ts
@@ -1,12 +1,19 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
+import {ref, computed} from 'vue'
+import {defineStore, mapState} from 'pinia'
 
 export const useCounterStore = defineStore('counter', () => {
   const count = ref(0)
   const doubleCount = computed(() => count.value * 2)
+
   function increment() {
     count.value++
   }
 
-  return { count, doubleCount, increment }
+  return {count, doubleCount, increment}
+})
+
+export const useIsCollapseStore = defineStore('isCollapse', {
+  state: () => ({
+    isCollapse: false
+  })
 })