84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
import { buildCategoryTree, categoryLabel } from "@/lib/meshkee/format";
|
|
import type { Category } from "@/lib/meshkee/types";
|
|
import { storeCategoryHref } from "@/lib/meshkee/urls";
|
|
|
|
export function ProductsMegaMenu({ categories }: { categories: Category[] }) {
|
|
const [open, setOpen] = useState(false);
|
|
const tree = buildCategoryTree(categories).filter(
|
|
(node) => node.children.length > 0 || !node.parentId,
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className={`mega-menu ${open ? "is-open" : ""}`}
|
|
onMouseEnter={() => setOpen(true)}
|
|
onMouseLeave={() => setOpen(false)}
|
|
>
|
|
<Link
|
|
href="/store"
|
|
className="mega-menu-trigger"
|
|
onFocus={() => setOpen(true)}
|
|
aria-expanded={open}
|
|
>
|
|
<span>محصولات</span>
|
|
<svg
|
|
className="mega-menu-chevron"
|
|
viewBox="0 0 16 16"
|
|
width="12"
|
|
height="12"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M3.5 5.75 8 10.25l4.5-4.5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.7"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</Link>
|
|
{open ? (
|
|
<div className="mega-menu-panel" role="menu">
|
|
{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 ? (
|
|
<ul className="mega-menu-children">
|
|
{parent.children.map((child) => (
|
|
<li key={child.id}>
|
|
<Link
|
|
href={storeCategoryHref(child.id, categoryLabel(child))}
|
|
className="mega-menu-child"
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
{categoryLabel(child)}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|