<script setup>
import { ref } from 'vue';

import AppMenuItem from './AppMenuItem.vue';

const model = ref([
    {
        label: 'Home',
        items: [{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' }]
    },
    {
        label: 'Super Admin',
        items: [
            { label: 'Tenants', icon: 'pi pi-fw pi-building', to: '/superadmin/tenants' },
            { label: 'Users', icon: 'pi pi-fw pi-users', to: '/superadmin/users' },
            { label: 'Orders', icon: 'pi pi-fw pi-shopping-cart', to: '/superadmin/orders' },
            { label: 'Contents', icon: 'pi pi-fw pi-file', to: '/superadmin/contents' }
        ]
    }
]);
</script>

<template>
    <ul class="layout-menu">
        <template v-for="(item, i) in model" :key="item">
            <app-menu-item v-if="!item.separator" :item="item" :index="i"></app-menu-item>
            <li v-if="item.separator" class="menu-separator"></li>
        </template>
    </ul>
</template>

<style lang="scss" scoped></style>
