heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add one layer of categories

Browse Source
This commit is contained in:
marzban-dev
2025-12-08 11:44:32 +03:30
parent 5fb1781d62
commit a366c20b95
5 changed files with 38 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/Header.vue
+6 -1
View File
@@ -32,7 +32,12 @@ const megaMenuCategories = computed(() => {
subitems: item.subcategorys.map((item) => {
return {
title: item.name,
link: item.slug,
subitems: item.subcategorys.map((item) => {
return {
title: item.name,
link: item.slug,
};
}),
};
}),
};
frontend/components/global/MegaMenu.vue
+23 -13
View File
@@ -7,7 +7,10 @@ type Props = {
title: string;
subitems: {
title: string;
link: string;
subitems: {
title: string;
link: string;
}[];
}[];
}[];
};
@@ -157,14 +160,12 @@ onMounted(() => {
/>
<div class="container relative z-10">
<div
class="flex h-200 bg-white rounded-b-2xl border-t border-slate-200"
>
<div class="flex h-200 bg-white rounded-b-2xl border-t border-slate-200">
<div class="bg-slate-100 p-4 flex flex-col overflow-y-auto mask-b-from-90% pb-8">
<button
v-for="(item, index) in items"
:key="item.title"
class="text-black transition-all p-4 rounded-xl cursor-default text-start max-lg:text-sm"
class="text-black transition-all p-4 rounded-xl cursor-default text-start text-sm max-lg:text-xs"
:class="index === selectedItem ? 'bg-blue-100 text-blue-500' : 'bg-slate-100'"
:id="`mega-menu-tab-${index}`"
@mouseenter="menuTabMouseEnter(index)"
@@ -188,17 +189,26 @@ onMounted(() => {
// justifyContent: 'center',
}"
>
<NuxtLink
v-for="item in selectedItemSubItems"
:to="{ name: 'products-slug', params: { slug: ['category', item.link] } }"
@click="closeAfterNavigate"
class="p-4 whitespace-nowrap h-fit text-slate-500 flex items-center justify-between hover:text-blue-500 hover:-translate-x-1.5 transition-all max-lg:text-sm"
<template
v-for="mainItem in selectedItemSubItems"
:key="mainItem.title"
>
<span class="truncate w-[90%] flex items-center gap-2">
<span class="text-primary px-4 py-2 flex items-center gap-2 text-sm max-lg:text-xs font-semibold">
<span class="w-2 h-[3px] rounded-full bg-blue-400"> </span>
{{ item.title }}
{{ mainItem.title }}
</span>
</NuxtLink>
<NuxtLink
v-for="item in mainItem.subitems"
:to="{ name: 'products-slug', params: { slug: ['category', item.link] } }"
@click="closeAfterNavigate"
class="px-4 py-2 whitespace-nowrap h-fit text-slate-500/85 flex items-center justify-between hover:text-blue-500 hover:-translate-x-1.5 transition-all text-sm max-lg:text-xs"
>
<span class="truncate w-[90%]">
{{ item.title }}
</span>
</NuxtLink>
</template>
</div>
</Transition>
</div>
frontend/components/global/ProductsGrid.vue
+1 -1
View File
@@ -45,7 +45,7 @@ withDefaults(defineProps<Props>(), {
:id="product.id"
:slug="product.slug"
:title="product.name"
:picture="product.variants[0].images[0].image"
:picture="product.image ?? product.variants[0].images[0].image"
:colors="product.colors"
:price="product.variants[0].price"
:rate="product.rating"