<template>
    <ul>
        <li v-for="({ label, link }, i) in items" :key="i">
            <router-link :to="link">
                <span>{{ 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">
.header-mobile>ul {
    @apply w-full h-8 flex gap-6 px-6;

    li {
        @apply translate-y-px;

        a {

            @apply h-full w-max text-[#333333] text-xs font-vazir;

            &.router-link-active {
                @apply text-[#47B556] font-bold;
            }
        }

        &:has(.router-link-active) {
            @apply border-b-2 border-[#47B556];
        }
    }



}
</style>