| | |
| | | :background-color="variables.menuBg" |
| | | :text-color="variables.menuText" |
| | | :unique-opened="true" |
| | | :active-text-color="variables.menuActiveText" |
| | | :active-text-color="settings.theme" |
| | | :collapse-transition="false" |
| | | mode="vertical" |
| | | > |
| | | <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> |
| | | <sidebar-item |
| | | v-for="route in permission_routes" |
| | | :key="route.path" |
| | | :item="route" |
| | | :base-path="route.path" |
| | | /> |
| | | </el-menu> |
| | | </el-scrollbar> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapGetters } from 'vuex' |
| | | import Logo from './Logo' |
| | | import SidebarItem from './SidebarItem' |
| | | import variables from '@/assets/styles/variables.scss' |
| | | import { mapGetters, mapState } from "vuex"; |
| | | import Logo from "./Logo"; |
| | | import SidebarItem from "./SidebarItem"; |
| | | import variables from "@/assets/styles/variables.scss"; |
| | | |
| | | export default { |
| | | components: { SidebarItem, Logo }, |
| | | computed: { |
| | | ...mapGetters([ |
| | | 'permission_routes', |
| | | 'sidebar' |
| | | ]), |
| | | ...mapState(["settings"]), |
| | | ...mapGetters(["permission_routes", "sidebar"]), |
| | | activeMenu() { |
| | | const route = this.$route |
| | | const { meta, path } = route |
| | | const route = this.$route; |
| | | const { meta, path } = route; |
| | | // if set path, the sidebar will highlight the path you set |
| | | if (meta.activeMenu) { |
| | | return meta.activeMenu |
| | | return meta.activeMenu; |
| | | } |
| | | return path |
| | | return path; |
| | | }, |
| | | showLogo() { |
| | | return this.$store.state.settings.sidebarLogo |
| | | return this.$store.state.settings.sidebarLogo; |
| | | }, |
| | | variables() { |
| | | return variables |
| | | return variables; |
| | | }, |
| | | isCollapse() { |
| | | return !this.sidebar.opened |
| | | return !this.sidebar.opened; |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | </script> |