<template>
  <div class="sidebar_menu">
    <div class="sidebar_menu_scroll">
      <el-menu default-active="1">
        <template v-for="(item, index) in menu" :key="item.path">
          <sidebarItem :item="item" :index="`${index}`" />
        </template>
      </el-menu>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useGetters } from "@/hooks/storeHooks";

import sidebarItem from "./sidebarItem.vue";

const { menu } = useGetters(["menu"]);
</script>
<style lang="scss" scoped>
.sidebar_menu {
  height: calc(100vh - 130px);
  width: 240px;
  overflow: hidden;
  &_scroll {
    height: calc(100vh - 73px);
    width: 257px;
    overflow-y: scroll;
    :deep(.el-menu) {
      background-color: transparent;
      .el-sub-menu__title,
      .el-menu-item {
        color: #000;
        &:hover {
          background-color: transparent;
          color: #666ee8;
        }
      }
      .is-active {
        background-color: transparent;
        color: #666ee8;
        font-weight: bolder;
      }
    }
  }
}
</style>
