1

src/layout/components/Navbar.vue

@@ -1,5 +1,12 @@
 <template>
   <div class="navbar">
+    <hamburger
+      v-if="device !== 'mobile'"
+      id="hamburger-container"
+      :is-active="sidebar.opened"
+      class="hamburger-container"
+      @toggleClick="toggleSideBar"
+    />
     <breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" />
     <top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" />
 
@@ -39,6 +46,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import Hamburger from '@/components/Hamburger'
 import Breadcrumb from '@/components/Breadcrumb'
 import TopNav from '@/components/TopNav'
 import Screenfull from '@/components/Screenfull'
@@ -50,6 +58,7 @@ import RuoYiDoc from '@/components/RuoYi/Doc'
 export default {
   emits: ['setLayout'],
   components: {
+    Hamburger,
     Breadcrumb,
     TopNav,
     Screenfull,
@@ -62,7 +71,8 @@ export default {
     ...mapGetters([
       'avatar',
       'device',
-      'nickName'
+      'nickName',
+      'sidebar'
     ]),
     setting: {
       get() {
@@ -76,6 +86,9 @@ export default {
     }
   },
   methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
+    },
     setLayout(event) {
       this.$emit('setLayout')
     },
@@ -108,6 +121,19 @@ export default {
     padding: 0 5px;
   }
 
+  .hamburger-container {
+    float: left;
+    height: 100%;
+    line-height: 50px;
+    cursor: pointer;
+    transition: background .3s;
+    -webkit-tap-highlight-color: transparent;
+
+    &:hover {
+      background: rgba(0, 0, 0, .025);
+    }
+  }
+
   .breadcrumb-container {
     float: left;
     
@@ -118,8 +144,9 @@ export default {
 
   .topmenu-container {
     position: absolute;
-    left: 0;
-    
+    left: 50px;
+    right: 0;
+
     @media (max-width: 768px) {
       left: 0;
     }

src/layout/components/Sidebar/index.vue

@@ -1,10 +1,10 @@
 <template>
     <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
-        <logo v-if="showLogo" :collapse="false" />
+        <logo v-if="showLogo" :collapse="isMenuCollapse" />
         <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
             <el-menu
                 :default-active="activeMenu"
-                :collapse="false"
+                :collapse="isMenuCollapse"
                 :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
                 :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
                 :unique-opened="true"
@@ -34,6 +34,9 @@ export default {
     computed: {
         ...mapState(["settings"]),
         ...mapGetters(["sidebarRouters", "sidebar"]),
+        isMenuCollapse() {
+            return !this.sidebar.opened
+        },
         activeMenu() {
             const route = this.$route
             const { meta, path } = route

src/layout/index.vue

@@ -68,8 +68,8 @@ export default {
     },
     classObj() {
       return {
-        hideSidebar: false, // 侧边栏始终展开
-        openSidebar: true, // 侧边栏始终展开
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
         withoutAnimation: this.sidebar.withoutAnimation,
         mobile: this.device === 'mobile'
       }