collapse sidebar with resize window

src/components/header.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="header">
     <!-- 折叠按钮 -->
-		<div class="collapse-btn" @click="collapseChage">
+    <div class="collapse-btn" @click="collapseChange">
       <el-icon v-if="sidebar.collapse"><Expand /></el-icon>
       <el-icon v-else><Fold /></el-icon>
     </div>
@@ -31,11 +31,16 @@
           </span>
           <template #dropdown>
             <el-dropdown-menu>
-							<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
+              <a
+                href="https://github.com/lin-xin/vue-manage-system"
+                target="_blank"
+              >
                 <el-dropdown-item>项目仓库</el-dropdown-item>
               </a>
               <el-dropdown-item command="user">个人中心</el-dropdown-item>
-							<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
+              <el-dropdown-item divided command="loginout"
+                >退出登录</el-dropdown-item
+              >
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -44,34 +49,42 @@
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted } from 'vue';
-import { useSidebarStore } from '../store/sidebar';
-import { useRouter } from 'vue-router';
-import imgurl from '../assets/img/img.jpg';
+import { onMounted } from "vue";
+import { useSidebarStore } from "../store/sidebar";
+import { useRouter } from "vue-router";
+import imgurl from "../assets/img/img.jpg";
 
-const username: string | null = localStorage.getItem('ms_username');
+const username: string | null = localStorage.getItem("ms_username");
 const message: number = 2;
 
 const sidebar = useSidebarStore();
 // 侧边栏折叠
-const collapseChage = () => {
+const collapseChange = () => {
   sidebar.handleCollapse();
 };
 
-onMounted(() => {
+const onCollapse = () => {
   if (document.body.clientWidth < 1500) {
-		collapseChage();
+    sidebar.collapse = false;
+    collapseChange();
+  } else {
+    sidebar.collapse = true;
+    collapseChange();
   }
+};
+
+onMounted(() => {
+  window.addEventListener("resize", onCollapse);
 });
 
 // 用户名下拉菜单选择事件
 const router = useRouter();
 const handleCommand = (command: string) => {
-	if (command == 'loginout') {
-		localStorage.removeItem('ms_username');
-		router.push('/login');
-	} else if (command == 'user') {
-		router.push('/user');
+  if (command == "loginout") {
+    localStorage.removeItem("ms_username");
+    router.push("/login");
+  } else if (command == "user") {
+    router.push("/user");
   }
 };
 </script>