admin-web/src/components/AdminSidebarMenuNode.vue

<script setup lang="ts">
import type { AdminNavigationNode } from '@/navigation/adminNavigation'

defineOptions({ name: 'AdminSidebarMenuNode' })

defineProps<{
  node: AdminNavigationNode
  level?: number
}>()
</script>

<template>
  <el-sub-menu v-if="node.children?.length" :index="node.key">
    <template #title>
      <component
        v-if="!level"
        :is="node.icon"
        class="menu-icon"
        :style="{ color: node.iconColor }"
        :size="20"
        :stroke-width="1.9"
      />
      <span>{{ node.title }}</span>
    </template>

    <AdminSidebarMenuNode v-for="child in node.children" :key="child.key" :node="child" :level="(level ?? 0) + 1" />
  </el-sub-menu>

  <el-menu-item v-else :index="node.path || node.key">
    <component
      v-if="!level"
      :is="node.icon"
      class="menu-icon"
      :style="{ color: node.iconColor }"
      :size="20"
      :stroke-width="1.9"
    />
    <template #title>{{ node.title }}</template>
  </el-menu-item>
</template>