<!--
 * @Author: WangJiaCheng
 * @Date: 2021-05-06 17:57:16
 * @LastEditors: WangJiaCheng
 * @LastEditTime: 2021-05-08 09:31:07
 * @Description:
-->
<template>
  <el-aside class="layout-aside">
    <logo
      title="绘开发"
      :collapse="isCollapse"
    />
    <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 Logo from './Logo'
import SideItem from './SideItem'

export default {
  name: 'DeafultSide',
  components: {
    Logo,
    SideItem
  },
  data() {
    return {
      isCollapse: false
    }
  },
  computed: {
    routes() {
      return routes
    }
  }
}
</script>

<style lang="less">
 .layout-aside {
   width: 210px !important;
   background-color: rgb(238, 241, 246);
   .el-scrollbar {
     height: calc(100% - 60px);
     .el-scrollbar__view {
       height: 100%;
      .el-menu {
        height: 100%;
      }
     }
   }
 }
</style>
