<template>
  <el-menu class="MyMenu" :default-active="`1-${script.menuList.value[0]?.children[0]?.uid}`">
    <el-sub-menu index="1">
      <template #title>
        <span>{{ script.menuList.value[0]?.title }}</span>
      </template>
      <el-menu-item
        :index="`1-${menuItem.uid}`"
        :key="menuItem.uid"
        v-for="menuItem in script.menuList.value[0]?.children"
        @click="script.handleMenuClick(menuItem)"
      >
        <img :src="menuItem.icon" class="menu-icon" v-if="menuItem.icon" />
        <span>{{ menuItem.title }}</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { Menu as IconMenu, HomeFilled } from "@element-plus/icons-vue";
import scriptFn from "./index.js";
const script = scriptFn();
</script>

<style scoped lang="less">
.MyMenu {
  padding: 16px;
  --el-menu-bg-color: transparent;
  --el-menu-active-color: #fff;
  :deep(.el-menu-item) {
    border-radius: 5px;
    transition: all 0.3s;
    &:hover {
      transform: translateX(5px);
    }
  }
  :deep(.el-menu-item.is-active) {
    background-color: #34acf7 !important;
  }
  .menu-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
  }
}
</style>