refactor: ♻️ hamburger 组件样式优化

src/components/Hamburger/index.vue

@@ -1,9 +1,5 @@
-<!-- 汉堡按钮组件：展开/收缩菜单  -->
 <template>
-  <div
+  <div class="hamburger-wrapper" @click="toggleClick">
-    class="px-[15px] flex items-center justify-center color-[var(--el-text-color-regular)]"
-    @click="toggleClick"
-  >
     <div :class="['i-svg:collapse', { hamburger: true, 'is-active': isActive }]" />
   </div>
 </template>
@@ -25,13 +21,25 @@ function toggleClick() {
 </script>
 
 <style scoped lang="scss">
-.hamburger {
+.hamburger-wrapper {
-  vertical-align: middle;
+  display: flex;
-  cursor: pointer;
+  align-items: center;
-  transform: scaleX(-1);
+  justify-content: center;
-}
+  padding: 0 15px;
 
-.hamburger.is-active {
+  .hamburger {
-  transform: scaleX(1);
+    vertical-align: middle;
+    cursor: pointer;
+    transform: scaleX(-1);
+  }
+
+  .hamburger.is-active {
+    transform: scaleX(1);
+  }
+}
+.layout-mix {
+  .hamburger-wrapper {
+    color: #fff;
+  }
 }
 </style>