<template>
  <scroll-bar>
    <sidebar-info v-show="!isCollapse" />
    <el-menu
      mode="vertical"
      :show-timeout="200"
      :default-active="$route.path"
      :collapse="isCollapse"
      background-color="#304156"
      unique-opened
      text-color="#bfcbd9">
      <sidebar-item :routes="permission_menus" />
    </el-menu>
  </scroll-bar>
</template>

<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
import SidebarInfo from './SideBarInfo'
import ScrollBar from './ScrollBar'

export default {
  name: 'Sidebar',
  components: { SidebarInfo, SidebarItem, ScrollBar },
  mounted () {
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'permission_menus'
    ]),
    isCollapse () {
      return !this.sidebar.opened
    }
  }
}
</script>

<style scoped>

</style>
