From aa0e21d2ce40c22d7bb212a828d9882b634e5432 Mon Sep 17 00:00:00 2001
From: Alireza Hassani <alirezahassani@Meshkees-Mac-mini.local>
Date: Fri, 4 Sep 2026 15:10:24 +0330
Subject: [PATCH] Fix mega menu layout: keep panel in header container and show
 childless categories in one row.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/components/products-mega-menu.tsx | 48 +++++++++++++-----
 app/globals.css                       | 73 ++++++++++++++++++++++++---
 2 files changed, 101 insertions(+), 20 deletions(-)

diff --git a/app/components/products-mega-menu.tsx b/app/components/products-mega-menu.tsx
index 3b36951..67018ca 100644
--- a/app/components/products-mega-menu.tsx
+++ b/app/components/products-mega-menu.tsx
@@ -11,6 +11,8 @@ export function ProductsMegaMenu({ categories }: { categories: Category[] }) {
   const tree = buildCategoryTree(categories).filter(
     (node) => node.children.length > 0 || !node.parentId,
   );
+  const withChildren = tree.filter((node) => node.children.length > 0);
+  const leafParents = tree.filter((node) => node.children.length === 0);
 
   return (
     <div
@@ -47,17 +49,17 @@ export function ProductsMegaMenu({ categories }: { categories: Category[] }) {
           {tree.length === 0 ? (
             <p className="empty-note">دسته‌بندی‌ای برای نمایش وجود ندارد.</p>
           ) : (
-            <div className="mega-menu-grid">
-              {tree.map((parent) => (
-                <div key={parent.id} className="mega-menu-column">
-                  <Link
-                    href={storeCategoryHref(parent.id, categoryLabel(parent))}
-                    className="mega-menu-parent"
-                    onClick={() => setOpen(false)}
-                  >
-                    {categoryLabel(parent)}
-                  </Link>
-                  {parent.children.length > 0 ? (
+            <>
+              <div className="mega-menu-grid">
+                {withChildren.map((parent) => (
+                  <div key={parent.id} className="mega-menu-column">
+                    <Link
+                      href={storeCategoryHref(parent.id, categoryLabel(parent))}
+                      className="mega-menu-parent"
+                      onClick={() => setOpen(false)}
+                    >
+                      {categoryLabel(parent)}
+                    </Link>
                     <ul className="mega-menu-children">
                       {parent.children.map((child) => (
                         <li key={child.id}>
@@ -71,10 +73,28 @@ export function ProductsMegaMenu({ categories }: { categories: Category[] }) {
                         </li>
                       ))}
                     </ul>
-                  ) : null}
+                  </div>
+                ))}
+              </div>
+              {leafParents.length > 0 ? (
+                <div className="mega-menu-leaf-row">
+                  <p className="mega-menu-leaf-label">More</p>
+                  <ul className="mega-menu-leaf-list">
+                    {leafParents.map((parent) => (
+                      <li key={parent.id}>
+                        <Link
+                          href={storeCategoryHref(parent.id, categoryLabel(parent))}
+                          className="mega-menu-parent-leaf"
+                          onClick={() => setOpen(false)}
+                        >
+                          {categoryLabel(parent)}
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
                 </div>
-              ))}
-            </div>
+              ) : null}
+            </>
           )}
         </div>
       ) : null}
diff --git a/app/globals.css b/app/globals.css
index 9d6b8a7..32321d6 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -71,6 +71,7 @@ textarea {
 }
 
 .header-inner {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1802,7 +1803,7 @@ a.article-card:hover .article-media img {
 }
 
 .mega-menu {
-  position: relative;
+  position: static;
 }
 
 .mega-menu-trigger {
@@ -1825,22 +1826,34 @@ a.article-card:hover .article-media img {
   position: absolute;
   top: calc(100% + 14px);
   right: 0;
-  width: min(760px, 70vw);
-  padding: 18px;
+  left: 0;
+  width: auto;
+  max-width: none;
+  padding: 20px 22px;
   border-radius: 22px;
   background: rgba(255, 255, 255, 0.97);
   box-shadow: var(--shadow);
   z-index: 35;
 }
 
+.mega-menu-panel::before {
+  content: "";
+  position: absolute;
+  top: -18px;
+  right: 0;
+  left: 0;
+  height: 18px;
+}
+
 .mega-menu-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 18px 22px;
 }
 
 .mega-menu-column {
   padding: 4px 2px 8px;
+  min-width: 0;
 }
 
 .mega-menu-parent {
@@ -1879,6 +1892,52 @@ a.article-card:hover .article-media img {
   color: var(--secondary);
 }
 
+.mega-menu-leaf-row {
+  margin-top: 18px;
+  padding-top: 16px;
+  border-top: 1px solid rgba(0, 35, 75, 0.08);
+}
+
+.mega-menu-leaf-label {
+  margin: 0 0 12px;
+  color: var(--secondary);
+  font-family: var(--font-en-title);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.mega-menu-leaf-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.mega-menu-parent-leaf {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 14px;
+  border: 1px solid rgba(0, 35, 75, 0.1);
+  border-radius: 999px;
+  color: var(--primary);
+  background: rgba(248, 243, 236, 0.7);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.4;
+  text-decoration: none;
+  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
+}
+
+.mega-menu-parent-leaf:hover {
+  border-color: rgba(204, 153, 102, 0.5);
+  color: var(--secondary);
+  background: rgba(255, 255, 255, 0.95);
+}
+
 .cart-drawer-root {
   position: fixed;
   inset: 0;
@@ -2250,7 +2309,9 @@ a.article-card:hover .article-media img {
   }
 
   .mega-menu-panel {
-    width: min(92vw, 520px);
+    width: auto;
+    left: 0;
+    right: 0;
   }
 }