<template>
  <el-menu class="sidebar-menu" :default-active="activePath" :collapse="collapsed" router @select="$emit('navigate')">
    <el-menu-item-group v-for="group in navigationGroups" :key="group.label" :title="group.label">
      <el-menu-item v-for="item in group.items" :key="item.path" :index="item.path">
        <el-icon><component :is="item.icon" /></el-icon>
        <template #title><span>{{ item.label }}</span></template>
      </el-menu-item>
    </el-menu-item-group>
  </el-menu>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";
import { navigationGroups, navigationItems } from "../../navigation/sidebar";

defineProps<{ collapsed?: boolean }>();
defineEmits<{ navigate: [] }>();
const route = useRoute();
const activePath = computed(() => navigationItems.find((item) => route.path === item.path || route.path.startsWith(`${item.path}/`))?.path || "/overview");
</script>
