tethys.backend/resources/js/Components/AsideMenuList.vue

<script setup lang="ts">
import AsideMenuItem from '@/Components/AsideMenuItem.vue';

const props = defineProps({
    // isDropdownList: Boolean,   
    menuItems: {
        type: Array<Object>,
        required: true,
    },
    // parentItem: {
    //     type: Object,
    //     required: false,
    // },
});

const emit = defineEmits(['menu-click']);

// const menuClick = (event, item) => {
//     emit('menu-click', event, item);
// };
</script>

<template>
    <div class="aside-menu">
        <ul>
            <!-- <li class="menu-item"> -->
                <!-- <AsideMenuItem
            v-for="(menuItem, index) in props.items"
            :key="index"
            v-bind:item="menuItem"
            @menu-click="menuClick"            
            /> -->
                <AsideMenuItem v-for="(item, index) in props.menuItems" :key="index" :item="item"> </AsideMenuItem>
                <!-- :is-dropdown-list="menuItem.children?.length > 0" -->
            <!-- </li> -->
        </ul>
    </div>
</template>

<style>
/* .aside-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    background-color: #f5f5f5;
    padding: 20px;
} */

.menu-item {
    margin-bottom: 10px;
}
</style>