<template>
    <ul class="seller-menu">
        <li v-for="(item, i) in items" :key="i">
            <router-link :to="item.link" v-ripple>
                <i :class="item.icon" />
                <span>{{ item.label }}</span>
            </router-link>
        </li>
    </ul>
</template>

<script setup>

const items = reactive([
    { link: '/panel/seller/store', label: 'فروشگاه', icon: 'isax isax-shop' },
    { link: '/panel/seller/products', label: 'همه کالاها', icon: 'isax isax-bag' },
    { link: '/panel/seller/new-product', label: 'معرفی کالا', icon: 'isax isax-bag-cross' },
    { link: '/panel/seller/orders', label: 'سفارشات', icon: 'isax isax-bag-tick-2' },
])
</script>

<style lang="scss">
.seller-menu {
    @apply flex flex-col gap-[0.3rem] pt-4 border-t border-[#E5E5E5];

    a {
        @apply w-72 h-[3.2rem] py-1.5 pr-[1.1rem] flex items-center gap-[0.9rem] text-[#333333] overflow-hidden relative;

        &.router-link-active {
            @apply bg-[#47B556]/20 text-[#47B556];

            &:after {
                @apply content-[''] absolute right-0 h-[2.4rem] w-[0.2rem] rounded-tl-sm rounded-bl-sm bg-[#47B556];
            }
        }

        i {
            @apply text-2xl;
        }

        span {
            @apply text-base font-medium font-vazir
        }
    }
}
</style>