anahita-front/pages/categories/index.vue

<template>
    <NuxtLayout :name="device" :config="config">
        <main class="categories">
            <div>
                <ul>
                    <li v-for="(item, i) in items" :key="i" :active="sub == i">
                        <div @click="sub = i" v-ripple>
                            <i :class="'isax ' + item.icon"></i>
                            <span>{{ item.name }}</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div>
                <template v-if="items[sub]?.sub?.length > 0">
                    <router-link :to="{ path: '/search', query: { category: items[sub].name } }">
                        <Button :label="$t('allProductsOf', items[sub])" link icon="isax isax-arrow-left-2" />
                    </router-link>
                </template>
                <Accordion expand-icon="isax left" collapse-icon="isax up">
                    <template v-for="(item, i) in items[sub]?.sub" :key="i">
                        <AccordionTab :header="item.name">
                            <ul>
                                <li v-for="(cat, i) in item?.sub" :key="i">
                                    <router-link :to="{ path: '/search', query: { category: cat.link } }">
                                        <div>
                                            <img :src="cat.headerImage" />
                                        </div>
                                        <span>{{ cat.name }}</span>
                                    </router-link>
                                </li>
                                <li>
                                    <router-link :to="{ path: '/search', query: { category: item.link } }">
                                        <div>
                                            <i class="isax isax-category" />
                                        </div>
                                        <span>{{ $t('allProducts') }}</span>
                                    </router-link>
                                </li>

                            </ul>
                        </AccordionTab>
                    </template>
                </Accordion>
            </div>
        </main>
    </NuxtLayout>
</template>

<script setup>
const config = reactive({
    mobile: { header: { search: true, menu: true }, navigation: true },
})
const { device } = inject('service')

if (device.value == 'desktop') navigateTo('/')

const categories = useCategoriesStore()
const items = categories.items
const sub = ref(0)
</script>

<style lang="scss">
.categories {
    @apply max-w-full w-full h-screen flex lg:hidden;

    &>div:nth-of-type(1) {
        @apply overflow-y-auto pb-14 w-max shrink-0;

        &::-webkit-scrollbar {
            @apply hidden;
        }

        &>ul {
            @apply flex flex-col bg-[#FAFAFA] min-h-full;

            li {
                @apply w-[5.7rem] h-[5.3rem] border-l border-b border-[#F1F2F4] text-[#333333] cursor-pointer;

                div {
                    @apply w-full h-full flex flex-col gap-[0.3rem] items-center justify-center overflow-hidden;

                    i {
                        @apply text-xl;
                    }

                    span {
                        @apply text-center text-[0.6em] font-vazir;
                    }
                }

                &[active='true'] {
                    @apply border-l-0 bg-white text-primary-600;
                }
            }
        }
    }

    &>div:nth-of-type(2) {
        @apply flex flex-col px-6 grow;

        &>a>button {
            @apply w-max h-max -mr-4 #{!important};

            .p-button-label {
                @apply text-right text-[0.6em] font-medium font-vazir;
            }

            .p-button-icon {
                @apply text-[0.5em] #{!important};
            }
        }

        .p-accordion {
            @apply w-full;

            .p-accordion-tab {
                @apply border-t border-[#F1F2F4] first:border-t-0;

                .p-accordion-header {
                    @apply w-full h-11 flex items-center;

                    .p-accordion-header-link {
                        @apply bg-transparent border-none w-full flex justify-between px-0;

                        .p-accordion-header-text {
                            @apply text-right text-[#333333] text-xs font-medium font-vazir;
                        }

                        .p-accordion-toggle-icon {
                            @apply text-[#333333];
                        }
                    }
                }

                .p-accordion-content {
                    @apply pb-[1.1rem] pt-3 rtl border-none px-0;

                    ul {
                        @apply grid grid-cols-3 gap-6 w-max;

                        li {
                            @apply w-max h-max;

                            a {
                                @apply w-[3.8rem] h-[5.5rem] flex flex-col items-center gap-3;

                                div {
                                    @apply rounded-full w-[3.8rem] h-[3.8rem] bg-[#F0F0F1] flex;

                                    img {
                                        @apply m-auto w-11;
                                    }

                                    i {
                                        @apply m-auto text-2xl;
                                    }
                                }

                                span {
                                    @apply text-[#333333] text-[0.6em] font-vazir;
                                }
                            }
                        }
                    }
                }

                &:not(:has(li)) .p-accordion-toggle-icon {
                    @apply invisible;
                }
            }
        }
    }
}
</style>