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

Update mega menu responsive and switch to css columns instead of grid for fixing items arranging

Browse Source
This commit is contained in:
marzban-dev
2026-05-01 14:10:06 +03:30
parent 6670635a73
commit fbe5f52014
1 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/MegaMenu.vue
+13 -11
View File
@@ -93,7 +93,7 @@ watch(
}, },
{ {
immediate: true, immediate: true,
} },
); );
watch(isOpen, async (newValue) => { watch(isOpen, async (newValue) => {
@@ -109,7 +109,7 @@ watch(isOpen, async (newValue) => {
{ {
background: "white", background: "white",
}, },
"=" "=",
); );
} else { } else {
gsapTimeline gsapTimeline
@@ -120,7 +120,7 @@ watch(isOpen, async (newValue) => {
}, },
{ {
filter: prevNavbarStyle.value.itemFilter, filter: prevNavbarStyle.value.itemFilter,
} },
) )
.fromTo( .fromTo(
"#header-navbar", "#header-navbar",
@@ -130,7 +130,7 @@ watch(isOpen, async (newValue) => {
{ {
background: prevNavbarStyle.value.background, background: prevNavbarStyle.value.background,
}, },
"=" "=",
); );
} }
}); });
@@ -161,7 +161,7 @@ onMounted(() => {
<div class="container relative z-10"> <div class="container relative z-10">
<div class="flex h-[70svh] max-h-200 bg-white rounded-b-2xl border-t border-slate-200"> <div class="flex h-[70svh] max-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"> <div class="bg-slate-100 p-4 flex flex-col overflow-y-auto mask-b-from-90% pb-8 w-70">
<button <button
v-for="(item, index) in items" v-for="(item, index) in items"
:key="item.title" :key="item.title"
@@ -183,19 +183,21 @@ onMounted(() => {
> >
<div <div
:key="selectedItem" :key="selectedItem"
class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4 gap-2 text-back w-full h-fit" class="columns-2 lg:columns-3 xl:columns-4 space-y-6 p-4 text-back w-full h-fit"
:style="{ :style="{
// gridTemplateRows: 'repeat(5, auto)', // gridTemplateRows: 'repeat(5, auto)',
// justifyContent: 'center', // justifyContent: 'center',
}" }"
> >
<template <div
v-for="mainItem in selectedItemSubItems" v-for="mainItem in selectedItemSubItems"
:key="mainItem.title" :key="mainItem.title"
class="flex flex-col gap-2 break-inside-avoid"
> >
<span
<span class="text-primary px-4 py-2 flex items-center gap-2 text-sm max-lg:text-xs font-semibold"> class="text-primary px-4 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> >
<span class="w-0.5 h-2 rounded-full bg-blue-400"> </span>
{{ mainItem.title }} {{ mainItem.title }}
</span> </span>
<NuxtLink <NuxtLink
@@ -208,7 +210,7 @@ onMounted(() => {
{{ item.title }} {{ item.title }}
</span> </span>
</NuxtLink> </NuxtLink>
</template> </div>
</div> </div>
</Transition> </Transition>
</div> </div>