<template>
    <template v-for="item in menus" :key="item.name">
        <ElSubMenu v-if="item.children" :index="item.name" class="bg-slate-100 dark:bg-zinc-800">
            <template #title>
                <div class="w-5 h-5 mr-2" v-if="item.icon">
                    <component :is="item.icon"></component>
                </div>
                {{ item.title }}
            </template>
            <SubMenus :menus="item.children"></SubMenus>
        </ElSubMenu>
        <ElMenuItem v-else :index="item.name" class="bg-slate-100 dark:bg-zinc-800">
            <template #title>
                <div class="w-5 h-5 mr-2" v-if="item.icon">
                    <component :is="item.icon"></component>
                </div>
                {{ item.title }}
            </template>
        </ElMenuItem>
    </template>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
    menus: {
        type: Array,
        default: () => []
    }
})
</script>
