12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- <template>
- <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
- <logo v-if="showLogo" :collapse="isCollapse" />
- <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
- <el-menu
- :default-active="activeMenu"
- :collapse="false"
- :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
- :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
- :unique-opened="true"
- :active-text-color="settings.theme"
- :collapse-transition="false"
- mode="vertical"
- >
- <sidebar-item
- v-for="(route, index) in sidebarRouters"
- :key="route.path + index"
- :item="route"
- :base-path="route.path"
- />
- </el-menu>
- </el-scrollbar>
- </div>
- </template>
- <script>
- 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: {
- ...mapState(["settings"]),
- ...mapGetters(["sidebarRouters", "sidebar"]),
- activeMenu() {
- 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 path;
- },
- showLogo() {
- return this.$store.state.settings.sidebarLogo;
- },
- variables() {
- return variables;
- },
- isCollapse() {
- return !this.sidebar.opened;
- }
- }
- };
- </script>
|