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

Fix mega menu animation and style

Browse Source
This commit is contained in:
marzban-dev
2025-10-27 12:34:25 +03:30
parent e907c350f7
commit f04b705072
1 changed files with 105 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/MegaMenu.vue
+105 -43
View File
@@ -31,6 +31,14 @@ const isScrollLocked = useScrollLock(window);
const navbarEl = ref<HTMLElement | null>(null);
const { height: navbarHeight } = useElementSize(navbarEl);
const { $gsap: gsap } = useNuxtApp();
let gsapTimeline: gsap.core.Timeline;
const prevNavbarStyle = ref({
itemFilter: "",
background: "",
});
// computed
const selectedItemSubItems = computed(() => {
@@ -55,6 +63,14 @@ const menuTabMouseLeave = () => {
selectTabTimer.value = null;
};
const updatePrevStyle = () => {
const headerNavbarEl = document.querySelector<HTMLDivElement>("#header-navbar")!;
const headerNavbarItemEl = document.querySelector<HTMLDivElement>(".header-navbar-item")!;
prevNavbarStyle.value.background = getComputedStyle(headerNavbarEl).backgroundColor;
prevNavbarStyle.value.itemFilter = getComputedStyle(headerNavbarItemEl).filter;
};
// watches
watch(
@@ -71,10 +87,54 @@ watch(
}
);
watch(isOpen, async (newValue) => {
if (newValue) {
updatePrevStyle();
gsapTimeline
.to(
".header-navbar-item",
{
filter: "invert(0%)",
}
)
.to(
"#header-navbar",
{
background: "white",
},
"="
);
} else {
gsapTimeline
.fromTo(
".header-navbar-item",
{
filter: "invert(0%)",
},
{
filter: prevNavbarStyle.value.itemFilter,
}
)
.fromTo(
"#header-navbar",
{
background: "white",
},
{
background: prevNavbarStyle.value.background,
},
"="
);
}
});
// lifecycle
onMounted(() => {
navbarEl.value = document.querySelector("#header-navbar");
gsapTimeline = gsap.timeline();
navbarEl.value = document.querySelector<HTMLDivElement>("#header-navbar");
});
</script>
@@ -86,51 +146,53 @@ onMounted(() => {
<div
v-if="isOpen"
:style="{ marginTop: `${navbarHeight}px` }"
class="fixed right-0 top-0 w-full z-999 bg-black/50 h-svh border-t border-slate-200"
class="fixed right-0 top-0 w-full z-999 bg-black/50 h-svh border-t border-slate-200 flex justify-center"
>
<div
class="flex h-200 bg-white"
@mouseleave="$emit('update:isOpen', false)"
>
<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"
:class="index === selectedItem ? 'bg-blue-100 text-blue-500' : 'bg-slate-100'"
:id="`mega-menu-tab-${index}`"
@mouseenter="menuTabMouseEnter(index)"
@click="selectedItem = index"
@mouseleave="menuTabMouseLeave"
>
{{ item.title }}
</button>
</div>
<div class="overflow-y-auto w-full mask-b-from-90% pb-8">
<Transition
name="fade"
mode="out-in"
:duration="150"
>
<div
:key="selectedItem"
class="grid grid-cols-4 p-4 text-back w-full h-fit"
:style="{
// gridTemplateRows: 'repeat(5, auto)',
// justifyContent: 'center',
}"
<div class="container">
<div
class="flex h-200 bg-white rounded-b-2xl"
@mouseleave="$emit('update:isOpen', false)"
>
<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"
:class="index === selectedItem ? 'bg-blue-100 text-blue-500' : 'bg-slate-100'"
:id="`mega-menu-tab-${index}`"
@mouseenter="menuTabMouseEnter(index)"
@click="selectedItem = index"
@mouseleave="menuTabMouseLeave"
>
<NuxtLink
v-for="item in selectedItemSubItems"
:to="'https://google.com'"
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"
{{ item.title }}
</button>
</div>
<div class="overflow-y-auto w-full mask-b-from-90% pb-8">
<Transition
name="fade"
mode="out-in"
:duration="150"
>
<div
:key="selectedItem"
class="grid grid-cols-4 p-4 text-back w-full h-fit"
:style="{
// gridTemplateRows: 'repeat(5, auto)',
// justifyContent: 'center',
}"
>
<span class="truncate w-[90%]">
{{ item.title }}
</span>
</NuxtLink>
</div>
</Transition>
<NuxtLink
v-for="item in selectedItemSubItems"
:to="'https://google.com'"
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"
>
<span class="truncate w-[90%]">
{{ item.title }}
</span>
</NuxtLink>
</div>
</Transition>
</div>
</div>
</div>
</div>