<template>
    <Link v-if="!props?.item?.children?.length" :to="props?.item?.path">
    <el-menu-item :index="props?.item?.path">
        <el-icon>
            <Component :is="props?.item?.meta?.icon" />
        </el-icon>
        <template #title>{{ props?.item?.meta?.title }}</template>
    </el-menu-item>
    </Link>
    <el-sub-menu :index="props?.item?.path" v-else>
        <template #title>
            <el-icon>
                <Component :is="props?.item?.meta?.icon" />
            </el-icon>
            <span>{{ props?.item?.meta?.title }}</span>
        </template>
        <template v-for="item in props?.item?.children">
            <SideBarItem :item="item" v-if="!item.hidden" :key="item.path" />
        </template>
    </el-sub-menu>
</template>
<script setup>
import { Link } from './index'
const props = defineProps({
    item: { type: Object }
})
</script>