<template>
  <div class="side-box">
    <el-menu
      default-active="/echarts"
      @select="selectMenu"
      :collapse="isExpand"
      collapse-transition
      router
    >
      <el-menu-item
        :index="item.path"
        v-for="(item, index) in siderData"
        :key="index"
      >
        <el-icon
          ><Operation v-show="item.icon === 'Operation'" />
          <VideoCamera v-show="item.icon === 'VideoCamera'" />
          <Edit v-show="item.icon === 'Edit'"
        /></el-icon>
        <template #title>{{ item.title }}</template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Operation, Edit, VideoCamera } from "@element-plus/icons-vue";
defineProps({
  siderData: {
    type: Array,
    default: [],
  },
  isExpand: {
    type: Boolean,
    default: true,
  },
});
function selectMenu(index) {}
</script>
<style scoped lang="scss">
.side-box {
  width: 100%;
  height: 100%;
}
</style>
