<script setup>
import { ref } from 'vue'

const settings = defineProps({
  collapse: Boolean,
  width: String
})


</script>

<template>
  <el-aside :width="settings.width">
    <el-scrollbar>
      <el-menu
        default-active="/switch"
        :collapse="settings.collapse"
        :router="true"
      >
        <el-menu-item index="/switch"><el-icon> <Connection /> </el-icon>断路器调试</el-menu-item>
<!--        <el-menu-item index="/about"><el-icon> <Menu /> </el-icon>文章管理列表</el-menu-item>-->
<!--        <el-menu-item index="/test"><el-icon> <Menu /> </el-icon>测试</el-menu-item>-->
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<style scoped>
.el-aside {
  height: 100vh;
  overflow: hidden;
  border-right: 1px solid #e6e6e6;
  background-color: #f6f6f6;
  padding-top: 10px;
}
.el-menu{
  background: #f6f6f6;
  padding: 0 10px;
}
.el-menu-item{
  border-radius: 10px;
  /*padding-left: 5px !important;*/
}
.el-menu-item.is-active{
  background: #c8cde4;
  border-radius: 10px;
  /*margin: 0 10px;*/
  color: #0066cc;
}

.el-scrollbar {
  height: 100vh;
  overflow: hidden;
  /*background-color: #1a1c1e;*/
}

.el-menu {
  border-right: none;
}
</style>
