<!--
 * @Author: WangJiaCheng
 * @Date: 2021-05-06 17:57:16
 * @LastEditors: WangJiaCheng
 * @LastEditTime: 2021-08-19 18:14:04
 * @Description:
-->
<template>
  <el-aside
    class="layout-aside"
    :width="isCollapse ? '65px' : '210px'"
  >
    <!-- <span @click="handleCollapse">
      <i :class="`${isCollapse ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'}`" />
    </span> -->
    <el-scrollbar>
      <el-menu
        :collapse="isCollapse"
      >
        <side-item
          v-for="route in routes"
          :key="route.path"
          :item="route"
          :base-path="route.path"
          :is-collapse="isCollapse"
        />
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<script>
import { routes } from '@/router'

import SideItem from './SideItem'

export default {
  name: 'DeafultSide',
  components: {
    SideItem
  },
  data() {
    return {
      isCollapse: true
    }
  },
  computed: {
    routes() {
      return routes
    }
  },
  methods: {
    handleCollapse() {
      this.isCollapse = !this.isCollapse
    }
  }
}
</script>

<style lang="less">
 .layout-aside.el-aside {
   width: 21px;
   .el-scrollbar {
     height: 100%;
     .el-scrollbar__view {
       height: 100%;
      .el-menu {
        height: 100%;
      }
     }
   }
 }
</style>
