<template>
  <div class="menu-drawer">
    <el-menu
    :class="{'menu-dark': appStyle=='dark','menu-light': appStyle=='light'}"
    :default-active="$route.path"
    :router="true"
    :background-color="appStyle=='dark' ?'#04142A':'#fff'"
    :text-color="appStyle=='dark' ?'#AFB3B6 ':'#4F5869'"
    :active-text-color="appStyle=='dark' ?'#2f9df2':'#435DEB'"
    >
       <template v-for="(route, index) in getRouters"  >
          <drawerBarItem  v-if="!route.hidden" :key="index"  :item="route" :basePath="route.path"/>
       </template>
    </el-menu>
  </div>
</template>
<script>
import {mapState } from 'vuex'
import drawerBarItem from './drawerBarItem.vue'
  export default {
    components:{
        drawerBarItem
    },
    computed: {
      ...mapState('user',['appStyle']),
      getRouters() {
        return this.$router.options.routes
      },
      key() {
        return this.$route.path
      }
    },
    methods: {
     
    }
  }
</script>
<style lang="scss" scoped>
.menu-drawer {
    >>> .menu-drawer-icon{
       margin-right: 10px;
    }
}
</style>