refactor: ♻️ 导航栏组件代码重构优化

src/layout/components/NavBar/index.vue

@@ -1,15 +1,13 @@
 <template>
-  <div class="navbar-container">
-    <!-- 导航栏面包屑 -->
-    <div class="flex">
-      <hamburger
-        :is-active="appStore.sidebar.opened"
-        @toggle-click="toggleSideBar"
-      />
+  <div class="navbar">
+    <div class="navbar__left">
+      <!-- 展开/收缩菜单  -->
+      <Hamburger :is-active="isSidebarOpened" @toggle-click="toggleSideBar" />
+      <!-- 面包屑 -->
       <breadcrumb />
     </div>
     <!-- 导航栏右侧 -->
-    <NavbarAction />
+    <NavbarRight />
   </div>
 </template>
 
@@ -18,16 +16,25 @@ import { useAppStore } from "@/store";
 
 const appStore = useAppStore();
 
+// 侧边栏是否打开
+const isSidebarOpened = computed(() => appStore.sidebar.opened);
+
+// 展开/收缩菜单
 function toggleSideBar() {
   appStore.toggleSidebar();
 }
 </script>
 
 <style lang="scss" scoped>
-.navbar-container {
-  @apply flex-x-between;
-
+.navbar {
+  display: flex;
+  justify-content: space-between;
   height: $navbar-height;
   background: var(--el-bg-color);
+
+  &__left {
+    display: flex;
+    align-items: center;
+  }
 }
 </style>