From c6225b3cf7bdc5f80fd829e58c29736e34b54024 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Wed, 28 Feb 2024 17:04:25 +0800
Subject: [PATCH] style: simplify sidebar css

---
 .../components/Sidebar/SidebarItem.vue        | 71 +++++++------------
 src/layouts/components/Sidebar/index.vue      |  1 -
 2 files changed, 25 insertions(+), 47 deletions(-)

diff --git a/src/layouts/components/Sidebar/SidebarItem.vue b/src/layouts/components/Sidebar/SidebarItem.vue
index 9392a6c..94e2805 100644
--- a/src/layouts/components/Sidebar/SidebarItem.vue
+++ b/src/layouts/components/Sidebar/SidebarItem.vue
@@ -7,16 +7,12 @@ import path from "path-browserify"
 
 interface Props {
   item: RouteRecordRaw
-  isCollapse?: boolean
   isTop?: boolean
-  isFirstLevel?: boolean
   basePath?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  isCollapse: false,
   isTop: false,
-  isFirstLevel: true,
   basePath: ""
 })
 
@@ -60,36 +56,32 @@ const resolvePath = (routePath: string) => {
 </script>
 
 <template>
-  <div :class="{ 'simple-mode': props.isCollapse && !isTop, 'first-level': props.isFirstLevel }">
-    <template v-if="!alwaysShowRootMenu && theOnlyOneChild && !theOnlyOneChild.children">
-      <SidebarItemLink v-if="theOnlyOneChild.meta" :to="resolvePath(theOnlyOneChild.path)">
-        <el-menu-item :index="resolvePath(theOnlyOneChild.path)">
-          <SvgIcon v-if="theOnlyOneChild.meta.svgIcon" :name="theOnlyOneChild.meta.svgIcon" />
-          <component v-else-if="theOnlyOneChild.meta.elIcon" :is="theOnlyOneChild.meta.elIcon" class="el-icon" />
-          <template v-if="theOnlyOneChild.meta.title" #title>
-            {{ theOnlyOneChild.meta.title }}
-          </template>
-        </el-menu-item>
-      </SidebarItemLink>
+  <template v-if="!alwaysShowRootMenu && theOnlyOneChild && !theOnlyOneChild.children">
+    <SidebarItemLink v-if="theOnlyOneChild.meta" :to="resolvePath(theOnlyOneChild.path)">
+      <el-menu-item :index="resolvePath(theOnlyOneChild.path)">
+        <SvgIcon v-if="theOnlyOneChild.meta.svgIcon" :name="theOnlyOneChild.meta.svgIcon" />
+        <component v-else-if="theOnlyOneChild.meta.elIcon" :is="theOnlyOneChild.meta.elIcon" class="el-icon" />
+        <template v-if="theOnlyOneChild.meta.title" #title>
+          {{ theOnlyOneChild.meta.title }}
+        </template>
+      </el-menu-item>
+    </SidebarItemLink>
+  </template>
+  <el-sub-menu v-else :index="resolvePath(props.item.path)" teleported>
+    <template #title>
+      <SvgIcon v-if="props.item.meta?.svgIcon" :name="props.item.meta.svgIcon" />
+      <component v-else-if="props.item.meta?.elIcon" :is="props.item.meta.elIcon" class="el-icon" />
+      <span v-if="props.item.meta?.title">{{ props.item.meta.title }}</span>
     </template>
-    <el-sub-menu v-else :index="resolvePath(props.item.path)" teleported>
-      <template #title>
-        <SvgIcon v-if="props.item.meta?.svgIcon" :name="props.item.meta.svgIcon" />
-        <component v-else-if="props.item.meta?.elIcon" :is="props.item.meta.elIcon" class="el-icon" />
-        <span v-if="props.item.meta?.title">{{ props.item.meta.title }}</span>
-      </template>
-      <template v-if="props.item.children">
-        <SidebarItem
-          v-for="child in showingChildren"
-          :key="child.path"
-          :item="child"
-          :is-collapse="props.isCollapse"
-          :is-first-level="false"
-          :base-path="resolvePath(child.path)"
-        />
-      </template>
-    </el-sub-menu>
-  </div>
+    <template v-if="props.item.children">
+      <SidebarItem
+        v-for="child in showingChildren"
+        :key="child.path"
+        :item="child"
+        :base-path="resolvePath(child.path)"
+      />
+    </template>
+  </el-sub-menu>
 </template>
 
 <style lang="scss" scoped>
@@ -104,17 +96,4 @@ const resolvePath = (routePath: string) => {
   margin-right: 12px;
   font-size: 18px;
 }
-
-.simple-mode {
-  &.first-level {
-    :deep(.el-sub-menu) {
-      .el-sub-menu__icon-arrow {
-        display: none;
-      }
-      span {
-        visibility: hidden;
-      }
-    }
-  }
-}
 </style>
diff --git a/src/layouts/components/Sidebar/index.vue b/src/layouts/components/Sidebar/index.vue
index 41f310b..3ccc7bd 100644
--- a/src/layouts/components/Sidebar/index.vue
+++ b/src/layouts/components/Sidebar/index.vue
@@ -68,7 +68,6 @@ const hiddenScrollbarVerticalBar = computed(() => {
           :key="route.path"
           :item="route"
           :base-path="route.path"
-          :is-collapse="isCollapse"
           :is-top="isTop"
         />
       </el-menu>