From fbe5f52014f70062f9adc34a4e90873af6324a27 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Fri, 1 May 2026 14:10:06 +0330
Subject: [PATCH] Update mega menu responsive and switch to css columns instead
 of grid for fixing items arranging

---
 frontend/components/global/MegaMenu.vue | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontend/components/global/MegaMenu.vue b/frontend/components/global/MegaMenu.vue
index d444049..632890d 100644
--- a/frontend/components/global/MegaMenu.vue
+++ b/frontend/components/global/MegaMenu.vue
@@ -93,7 +93,7 @@ watch(
     },
     {
         immediate: true,
-    }
+    },
 );
 
 watch(isOpen, async (newValue) => {
@@ -109,7 +109,7 @@ watch(isOpen, async (newValue) => {
                 {
                     background: "white",
                 },
-                "="
+                "=",
             );
     } else {
         gsapTimeline
@@ -120,7 +120,7 @@ watch(isOpen, async (newValue) => {
                 },
                 {
                     filter: prevNavbarStyle.value.itemFilter,
-                }
+                },
             )
             .fromTo(
                 "#header-navbar",
@@ -130,7 +130,7 @@ watch(isOpen, async (newValue) => {
                 {
                     background: prevNavbarStyle.value.background,
                 },
-                "="
+                "=",
             );
     }
 });
@@ -161,7 +161,7 @@ onMounted(() => {
 
             <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="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
                             v-for="(item, index) in items"
                             :key="item.title"
@@ -183,19 +183,21 @@ onMounted(() => {
                         >
                             <div
                                 :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="{
                                     // gridTemplateRows: 'repeat(5, auto)',
                                     // justifyContent: 'center',
                                 }"
                             >
-                                <template
+                                <div
                                     v-for="mainItem in selectedItemSubItems"
                                     :key="mainItem.title"
+                                    class="flex flex-col gap-2 break-inside-avoid"
                                 >
-                                
-                                    <span class="text-primary px-4 py-2 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="text-primary px-4 flex items-center gap-2 text-sm max-lg:text-xs font-semibold"
+                                    >
+                                        <span class="w-0.5 h-2 rounded-full bg-blue-400"> </span>
                                         {{ mainItem.title }}
                                     </span>
                                     <NuxtLink
@@ -208,7 +210,7 @@ onMounted(() => {
                                             {{ item.title }}
                                         </span>
                                     </NuxtLink>
-                                </template>
+                                </div>
                             </div>
                         </Transition>
                     </div>