Fix mega menu animation and style

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,17 +146,18 @@ 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="container">
                 <div
-                class="flex h-200 bg-white"
+                    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"
+                            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)"
@@ -134,5 +195,6 @@ onMounted(() => {
                     </div>
                 </div>
             </div>
+        </div>
     </Transition>
 </template>