mohadese namavar
98 lines
2.4 KiB
Vue
98 lines
2.4 KiB
Vue
<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>
|