<template>
    <div class="product-menu">
        <ul>
            <li v-for="({ icon, label, click }, i) in meta.init.menu" :key="i" >
                <div @click="click(dialogRef)" v-ripple>
                    <i :class="icon" />
                    <span>{{ label }}</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup>
const { meta } = useRoute()
const dialogRef = inject('dialogRef')
</script>

<style lang="scss">
.product-menu {
    @apply w-full flex flex-col px-6 py-[1.1rem] rounded-t-[0.6rem] bg-white rtl;

    ul {
        @apply w-full flex flex-col gap-4;

        li {
            @apply border-[#E5E5E5] border-b last:border-none;

            div {
                @apply flex items-center gap-4 pb-4 text-[#333333] relative overflow-hidden;

                i {
                    @apply text-xl;
                }

                h2 {
                    @apply text-xs font-medium font-vazir;
                }
            }
        }
    }
}
</style>
