init git

pages/categories/index.vue

@@ -0,0 +1,175 @@
+<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>