<template>
  <div class="rpm-sidebar">
    <!--<el-scrollbar wrap-class="scrollbar-wrapper">-->
      <el-menu
        mode="vertical"
        text-color="white"
        :background-color="themeColor"
        :active-text-color="themeColor"
        :default-active="activeMenu"
      >
        <SidebarItem
          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 '@/styles/variables.scss'

export default {
  components: { SidebarItem/*, Logo*/ },
  data() {
    return {
      themeColor: variables.rpmThemeColor
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      '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
    },
    variables() {
      return variables
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";

  .rpm-sidebar {
    position: absolute;
    top: 60px;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 180px;
    background-color: $rpm-theme-color;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1px;
    border-right: 1px solid $rpm-theme-color;
  }
  .rpm-sidebar::-webkit-scrollbar {
    width: 0;
  }
  .rpm-sidebar .el-menu {
    width: 182px;
  }
  .el-submenu .el-menu-item {
    padding-left: 49px !important;
  }
  .el-menu-item i {
    color: white;
  }
  .el-menu-item.is-active {
    background-color: white !important;
  }
</style>
