<template>
  <div class="menu-nav">
    <MenuItem 
      v-for="menu in menus"
      :key="menu.menuID"
      :menu="menu" 
      :collapsed="collapsed"
      @menu-click="$emit('menu-click', $event)"
    />
  </div>
</template>

<script setup lang="ts">
import type { SysMenu } from '@/types';
// @ts-ignore - Vue 3.5 defineOptions支持递归组件
import MenuItem from './MenuItem.vue';

// Props
interface Props {
  menus: SysMenu[];
  collapsed?: boolean;
}

defineProps<Props>();

// Emits
defineEmits<{
  'menu-click': [menu: SysMenu];
}>();
</script>

<style lang="scss" scoped>
.menu-nav {
  padding: 8px 0;
}
</style>
