<template>
    <ul class="drawer-menu">
        <li v-for="(item, i) in items" :key="i">
            <router-link :to="item.link" @click="sidebar.visible = false">
                <Button v-bind="item.props" iconPos="right" severity="secondary" text />
            </router-link>
        </li>
    </ul>
</template>

<script setup>
const props = defineProps(['menu'])
const { sidebar } = inject('service')

const items = ref([])
items.value = props.menu.map((item) => {
    item.props = { label: item.title, icon: 'isax ' + item.icon }
    return item
})
</script>

<style lang="scss">
.drawer-menu {
    @apply rtl w-60 flex flex-col gap-3 px-4 pt-[1.4rem];

    li {
        button {
            @apply h-10 py-1.5 justify-end;

            .p-button-icon {
                @apply text-[#333333] text-2xl ml-3;
            }

            .p-button-label {
                @apply text-[#333333] text-lg font-medium font-vazir grow-0 whitespace-nowrap;
            }
        }
    }
}
</style>