From f04b7050723393c5ea546ea6c914beac808d11c6 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Mon, 27 Oct 2025 12:34:25 +0330
Subject: [PATCH] Fix mega menu animation and style

---
 frontend/components/global/MegaMenu.vue | 148 +++++++++++++++++-------
 1 file changed, 105 insertions(+), 43 deletions(-)

diff --git a/frontend/components/global/MegaMenu.vue b/frontend/components/global/MegaMenu.vue
index b428108..253f780 100644
--- a/frontend/components/global/MegaMenu.vue
+++ b/frontend/components/global/MegaMenu.vue
@@ -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>