feat: 🎸 重构sider组件中

src/pages/index/layout/components/Silder/Item.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <!-- <i v-if="icon.includes('el-icon')" :class="[icon, 'sub-el-icon', 'anticon']" /> -->
-    <svg-icon :icon-class="icon" class="anticon" />
+    <i v-if="icon.includes('el-icon')" :class="[icon, 'sub-el-icon', 'anticon']" />
+    <svg-icon v-else :icon-class="icon" class="anticon" />
     <slot name="title">
       <span class="anticon-item">{{ title }}</span>
     </slot>

src/pages/index/layout/modules/Test.vue

@@ -1,25 +1,29 @@
 <template>
-  <div class="app__wrap">
-    <div class="sidebar__wrap">
+  <el-container class="app__wrap">
+    <div class="sidebar__wrap" :class="{'sidebar__wrap--collapsed': collapsed}">
       <logo
-        v-if="show_logo"
+        v-if="showLogo"
         :collapsed="collapsed"
       />
-      <sider /></div>
+      <sider />
+    </div>
+    <el-main><hamburger :collapsed="collapsed" class="hamburger-container" @toggleClick="setCollapsed" /></el-main>
+  </el-container>
+  <!-- <div class="app__wrap">
+    <div class="sidebar__wrap" :class="{'sidebar__wrap--collapsed': collapsed}">
+      <logo
+        v-if="showLogo"
+        :collapsed="collapsed"
+      />
+      <sider />
+    </div>
     <div class="main__wrap">
-      <div class="navbar__wrap" />
+      <div class="navbar__wrap">
+      </div>
       <div class="tags__wrap" />
       <div class="main__wrap" />
     </div>
-    <!-- <sidebar class="sidebar-wrap" />
-    <div :class="{hasTagsView: has_tags}" class="main-wrap">
-      <div>
-        <navbar />
-        <tags-view v-if="has_tags" />
-      </div>
-      <app-main />
-    </div> -->
-  </div>
+  </div> -->
 </template>
 
 <script lang="ts">
@@ -31,32 +35,63 @@ import TagsView from '../components/TagsView.vue'
 import Logo from '_c/Logo/index.vue'
 import Scrollbar from '_c/Scrollbar/index.vue'
 import Sider from '_c/Sider/index.vue'
-import Navbar from '../components/Navbar.vue'
-
-import config from '_p/index/config'
-const { show_logo, has_tags } = config
+import Hamburger from '_c/Hamburger/index.vue'
 export default defineComponent({
   name: 'Layout',
   components: {
     Sider,
-    Navbar,
+    Hamburger,
+    // Navbar,
     AppMain,
     TagsView,
     Logo,
     Scrollbar
   },
   setup() {
+    const collapsed = computed(() => appStore.collapsed)
+    const showLogo = computed(() => appStore.showLogo)
+    const showTags = computed(() => appStore.showTags)
+
+    function setCollapsed(collapsed: boolean): void {
+      appStore.SetCollapsed(collapsed)
+    }
+
     return {
-      show_logo, has_tags
+      collapsed,
+      showLogo,
+      showTags,
+      setCollapsed
     }
   }
 })
 </script>
 
 <style lang="less" scoped>
-.app-wrap {
+.app__wrap {
   position: relative;
   height: 100%;
   width: 100%;
+  // .sidebar__wrap {
+  //   position: absolute;
+  //   width: @menuWidth;
+  //   top: 0;
+  //   left: 0;
+  //   height: 100%;
+  //   transition: all 0.2s;
+  // }
+  // .sidebar__wrap--collapsed {
+  //   width: @menuMinWidth;
+
+  // }
+  // .main__wrap {
+  //   position: absolute;
+  //   width: calc(~"100% - @{menuWidth}");
+  //   height: 100%;
+  //   top: 0;
+  //   left: @menuWidth;
+  //   .navbar__wrap {
+  //     height: @navbarHeight;
+  //   }
+  // }
 }
 </style>