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 (
دستهبندیای برای نمایش وجود ندارد.
) : (
-
- {tree.map((parent) => (
-
-
setOpen(false)}
- >
- {categoryLabel(parent)}
-
- {parent.children.length > 0 ? (
+ <>
+
+ {withChildren.map((parent) => (
+
+
setOpen(false)}
+ >
+ {categoryLabel(parent)}
+
{parent.children.map((child) => (
-
@@ -71,10 +73,28 @@ export function ProductsMegaMenu({ categories }: { categories: Category[] }) {
))}
- ) : null}
+
+ ))}
+
+ {leafParents.length > 0 ? (
+
+
More
+
+ {leafParents.map((parent) => (
+ -
+ setOpen(false)}
+ >
+ {categoryLabel(parent)}
+
+
+ ))}
+
- ))}
-
+ ) : null}
+ >
)}
) : 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;
}
}