<template>
  <el-menu
    class="cust-menu"
    :collapse="isCollapse"
    :default-active="activeIndex"
    @select="onSelect"
  >
    <template v-for="item in items" :key="item.path">
      <sider-bar-item :item="item" />
    </template>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref,computed } from 'vue'
import SiderBarItem from './SiderBarItem.vue';
const isCollapse = ref(false)
import { routes } from '@/router/index'
import { useRouter } from 'vue-router';

const items = ref(routes.filter(_ => !_.hidden))
const router = useRouter()
const activeIndex = computed(() => router.currentRoute.value.path)


const onSelect = (index) => {
  router.push(index)
}

</script>

<style lang="scss" scoped>
.cust-menu {
  --el-menu-bg-color: #041425;
  --el-menu-text-color: #a7adb4;
  --el-menu-active-color: #ffffff;
  --el-menu-hover-text-color: #ffffff;
  --el-menu-hover-bg-color: #3875f6;
  --el-menu-item-height: 40px;
  --el-menu-sub-item-height: 40px;
}
</style>
