|
@@ -1,11 +1,11 @@
|
|
|
<template>
|
|
|
<div :class="{ 'has-logo': showLogo }">
|
|
|
- <logo v-if="showLogo" :collapse="isCollapse" />
|
|
|
<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>
|
|
|
|
|
@@ -14,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 () {
|
|
@@ -21,7 +22,7 @@ export default {
|
|
|
leup: true,
|
|
|
};
|
|
|
},
|
|
|
- components: { SidebarItem, Logo },
|
|
|
+ components: { SidebarItem, Logo, Hamburger },
|
|
|
computed: {
|
|
|
...mapGetters(["sidebar", "permission_routes"]),
|
|
|
routes () {
|
|
@@ -67,6 +68,11 @@ export default {
|
|
|
return !this.sidebar.opened;
|
|
|
},
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ toggleSideBar () {
|
|
|
+ this.$store.dispatch('app/toggleSideBar')
|
|
|
+ },
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|