meshkee-websites/hoomat-store
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mega menu layout: keep panel in header container and show childless categories in one row.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-09-04 15:10:24 +03:30
co-authored by Cursor
parent cfabf3e327
commit aa0e21d2ce
2 changed files with 101 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/products-mega-menu.tsx
+34 -14
View File
@@ -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}