<template>
	<div :class="{'has-logo':showLogo}">
		<!-- :collapse="isCollapse"  -->
		<!-- <logo v-if="showLogo" /> -->
		<el-scrollbar wrap-class="scrollbar-wrapper">
			<!-- :collapse="isCollapse" -->
			<el-menu
				:default-active="activeMenu"
				:text-color="variables.menuText"
				:unique-opened="$store.state.settings.uniqueOpened"
				:active-text-color="variables.menuActiveText"
				:collapse-transition="false"
				mode="horizontal"
				class="el-menu-demo"
				background-color="transparent"
				text-color="#fff"
				active-text-color="#ffd04b"
			>
				<sidebar-item v-for="route in sidebarRouters" :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'

export default {
  components: { SidebarItem},
  computed: {
    ...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>
