init git

2024-06-16 00:22:14 +04:30
commit ec84dfd222
322 changed files with 77942 additions and 0 deletions
@@ -0,0 +1,97 @@
+<template>
+    <ul class="navigation">
+        <li>
+            <Button :label="$t('product-categories')" iconPos="right" severity="secondary" text icon="isax isax-menu-1"
+                @click="visible = !visible" />
+        </li>
+        <li v-for="(item, i) in items" :key="i">
+            <component :is="item.link.includes('http') ? 'a' : 'router-link'" :to="item.link" :href="item.link">
+                <Button iconPos="right" severity="secondary" text v-bind="item.props" />
+            </component>
+        </li>
+        <li>
+            <Button iconPos="right" severity="secondary" text icon="isax isax-search-normal-1"
+                @click="$router.push('/search')" />
+        </li>
+    </ul>
+    <AppDesktopHeaderMegaMenu v-model="visible" />
+</template>
+
+<script setup>
+const items = ref([])
+const visible = ref(false)
+
+const { status, data, error } = await useFetch('/api/headers')
+
+if (status.value == 'success')
+    items.value = data.value.map((item) => {
+        item.props = { label: item.title, icon: 'isax ' + item.icon }
+        return item
+    })
+else throw createError(error.value)
+</script>
+
+<style lang="scss">
+.navigation {
+    @apply flex items-center justify-center lg:gap-6 2xl:justify-between w-full max-w-[70.6rem];
+
+    li:first-child,
+    li:last-child {
+        @apply flex items-center relative;
+    }
+
+    li:first-child::after,
+    li:last-child::before {
+        @apply content-['_'] w-0.5 h-[1.3rem] bg-[#DCDCDC] absolute;
+    }
+
+    li:first-child {
+        @apply -ml-1;
+
+        &::after {
+            @apply left-0 2xl:-left-3;
+        }
+    }
+
+    li:last-child {
+        @apply -mr-1;
+
+        &::before {
+            @apply 2xl:-right-3;
+        }
+    }
+
+    li {
+
+        button {
+            .p-button-icon {
+                @apply text-[#333333] text-xl;
+            }
+
+            &:not(.p-button-icon-only) .p-button-icon {
+                @apply ml-2;
+            }
+
+            .p-button-label {
+                @apply text-[#333333] text-lg font-medium font-vazir whitespace-nowrap no-underline;
+            }
+        }
+    }
+
+    li:nth-child(n + 7):not(:last-child) {
+        @apply max-[1500px]:hidden;
+    }
+
+    li:nth-child(n + 6):not(:last-child) {
+        @apply max-[1380px]:hidden;
+    }
+
+    li:nth-child(n + 5):not(:last-child) {
+        @apply max-xl:hidden;
+    }
+
+    li:not(:last-child:first-child) {
+        @apply max-2xl:-mx-1;
+    }
+}
+</style>