From f4f680b79f430829aca95f8f1bee85a7e10fd3f9 Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Thu, 18 Jun 2026 18:48:49 +0800
Subject: [PATCH] =?UTF-8?q?refactor(sidebar):=20=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E6=8A=98=E5=8F=A0=E6=8C=89=E9=92=AE=E4=B8=BA=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E5=B9=B6=E7=AE=80=E5=8C=96=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Hamburger/index.vue |  8 +-------
 src/layouts/MixLayout.vue          | 18 +++++++++++++++---
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 0c22aa83..832b054a 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -1,12 +1,6 @@
 <template>
   <div class="hamburger-wrapper" @click="toggleClick">
-    <div
-      :class="[
-        'i-svg:arrow-left-right',
-        { hamburger: true, 'is-active': isActive },
-        hamburgerClass,
-      ]"
-    />
+    <div :class="['i-svg:collapse', { hamburger: true, 'is-active': isActive }, hamburgerClass]" />
   </div>
 </template>
 
diff --git a/src/layouts/MixLayout.vue b/src/layouts/MixLayout.vue
index 2c6c78de..b20d9ec0 100644
--- a/src/layouts/MixLayout.vue
+++ b/src/layouts/MixLayout.vue
@@ -60,8 +60,8 @@
             />
           </el-menu>
         </el-scrollbar>
-        <div class="layout__sidebar-toggle">
-          <Hamburger :is-active="isSidebarOpen" @toggle-click="toggleSidebar" />
+        <div class="layout__sidebar-toggle" @click="toggleSidebar">
+          <div class="i-svg:arrow-left-right layout__sidebar-toggle-icon" />
         </div>
       </div>
 
@@ -87,7 +87,6 @@ import LayoutToolbar from "./components/LayoutToolbar.vue";
 import LayoutTagsView from "./components/LayoutTagsView.vue";
 import LayoutMain from "./components/LayoutMain.vue";
 import LayoutSidebarItem from "./components/LayoutSidebarItem.vue";
-import Hamburger from "@/components/Hamburger/index.vue";
 import variables from "@/styles/variables.module.scss";
 const { width } = useWindowSize();
 
@@ -242,8 +241,21 @@ const useMenuColors = computed(
         width: 100%;
         height: $sidebar-toggle-height;
         line-height: $sidebar-toggle-height;
+        cursor: pointer;
         background-color: var(--menu-background);
         border-top: 1px solid var(--menu-border);
+
+        &-icon {
+          width: 18px;
+          height: 18px;
+          font-size: 18px;
+          color: var(--el-text-color-secondary);
+          transition: color 0.16s;
+        }
+
+        &:hover &-icon {
+          color: var(--el-color-primary);
+        }
       }
     }