侧边导航栏样式修改

src/layout/components/AppMain.vue

@@ -50,6 +50,7 @@ export default {
   overflow: hidden;
   padding-left: 240px;
   padding-top: 80px;
+  transition: width 0.28s;
   /* margin-top: 112px; */
 }
 .app-main-content {

src/layout/components/Sidebar/index.vue

@@ -1,10 +1,11 @@
 <template>
   <div :class="{ 'has-logo': showLogo }">
     <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu class="navMenu" :default-active="activeMenu" :background-color="variables.menusBg" :text-color="variables.menuText" :unique-opened="false" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical">
+      <el-menu class="navMenu" :collapse="isCollapse" :default-active="activeMenu" :background-color="variables.menusBg" :text-color="variables.menuText" :unique-opened="false" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical">
         <sidebar-item v-for="(route, index) in permission_routes" :key="index" :item="route" :base-path="route.path" :leup="leup" />
       </el-menu>
     </el-scrollbar>
+    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
   </div>
 </template>
 
@@ -13,6 +14,7 @@ import { mapGetters } from "vuex";
 import Logo from "./Logo";
 import SidebarItem from "./SidebarItem";
 import variables from "@/styles/variables.scss";
+import Hamburger from '@/components/Hamburger'
 
 export default {
   data () {
@@ -20,7 +22,7 @@ export default {
       leup: true,
     };
   },
-  components: { SidebarItem, Logo },
+  components: { SidebarItem, Logo, Hamburger },
   computed: {
     ...mapGetters(["sidebar", "permission_routes"]),
     routes () {
@@ -66,6 +68,11 @@ export default {
       return !this.sidebar.opened;
     },
   },
+  methods: {
+    toggleSideBar () {
+      this.$store.dispatch('app/toggleSideBar')
+    },
+  }
 };
 </script>
 

src/layout/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="app-wrapper">
-    <sidebar class="sidebar-container" id="sidebar-containers" />
+    <sidebar :class="isSidebar ? 'hide-sidebar-container' : ''" class="sidebar-container" id="sidebar-containers" />
     <div class="main-container">
       <navbar />
-      <app-main id="main-containers" />
+      <app-main id="main-containers" :class="isSidebar ? 'hide-main-containers' : ''" />
     </div>
     <!--修改密码弹框-->
     <PublicPageDialog dialog-title="修改密码" dialog-size="496px" :dialog-drawer="pwdflag" @handleClose="resetForm('dataForm')" @handleSubmit="addSubmit('dataForm')">
@@ -90,6 +90,12 @@ export default {
   },
   computed: {
     ...mapGetters(['pwdflag', 'outflag', 'name']),
+    sidebar () {
+      return this.$store.state.app.sidebar
+    },
+    isSidebar () {
+      return !this.sidebar.opened
+    }
   },
   methods: {
     //存储数据项-提交
@@ -191,7 +197,9 @@ export default {
   position: absolute;
   z-index: 999;
 }
-
+.hide-main-containers {
+  padding-left: 48px;
+}
 .fixed-header {
   position: fixed;
   top: 0;

src/styles/sidebar.scss

@@ -9,7 +9,7 @@
 
   .sidebar-container {
     width: 240px;
-    // transition: width 0.28s;
+    transition: width 0.28s;
     // width: $sideBarWidth !important;
     background-color: #074FB8;
     // height: 100%;
@@ -109,6 +109,10 @@
     }
   }
 
+  .hide-sidebar-container {
+    width: 48px;
+  }
+
   .hideSidebar {
     .sidebar-container {
       width: 250px;