merge and filter for product and product varient

frontend/components/global/Header.vue

@@ -133,9 +133,10 @@ const megaMenuCategories = computed(() => {
                         v-for="(link, index) in NAV_LINKS"
                         :key="index"
                         :to="link.path"
+                        @click="isCategoriesMenuOpen = false"
                         class="underline-offset-[10px]"
-                        :activeClass="isCategoriesMenuOpen && link.title !== 'دسته بندی ها' ? 'underline' : ''"
-                        :class="isCategoriesMenuOpen ? 'underline' : ''"
+                        :activeClass="isCategoriesMenuOpen ? 'no-underline' : 'underline'"
+                        :class="isCategoriesMenuOpen && link.title === 'دسته بندی ها' ? 'underline' : ''"
                         @mouseenter="link.title === 'دسته بندی ها' ? (isCategoriesMenuOpen = true) : undefined"
                     >
                         {{ link.title }}

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>

frontend/components/server-logs/LogDate.vue

@@ -1,28 +0,0 @@
-<script lang="ts" setup>
-
-// import
-
-import { usePersianTimeAgo } from "~/composables/global/usePersianTimeAgo";
-
-// type
-
-type Props = {
-    date: string
-}
-
-// props
-
-const props = defineProps<Props>();
-const { date } = toRefs(props);
-
-// state
-
-const timeAgo = usePersianTimeAgo(new Date(date.value));
-
-</script>
-
-<template>
-    <div class="px-3 pb-1 pt-1.5 rounded-lg bg-neutral-600 text-white" dir="rtl">
-        {{ timeAgo }}
-    </div>
-</template>