Add Meshkee product catalog navigation and details

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-26 19:42:35 +03:30
parent 00126e5777
commit 34ce4f6925
13 changed files with 1499 additions and 97 deletions
@@ -0,0 +1,126 @@
+"use client";
+
+import { ChevronDown, ChevronLeft } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import {
+  categoryPath,
+  fetchProductCategories,
+  getLevelTwoProductCategories,
+  type ProductCategory,
+} from "../lib/meshkee";
+
+type ActivePage = "home" | "products" | "about" | "contact";
+
+const navigationItems: {
+  label: string;
+  href: string;
+  key?: ActivePage;
+}[] = [
+  { label: "صفحه اصلی", href: "/", key: "home" },
+  { label: "خدمات", href: "/#services" },
+  { label: "اخبار", href: "/#news" },
+  { label: "درباره ما", href: "/about-us", key: "about" },
+  { label: "تماس با ما", href: "/contact-us", key: "contact" },
+];
+
+export default function HeaderNavigation({
+  active,
+  mobileOpen,
+  onNavigate,
+}: {
+  active?: ActivePage;
+  mobileOpen: boolean;
+  onNavigate?: () => void;
+}) {
+  const [categories, setCategories] = useState<ProductCategory[]>([]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    fetchProductCategories(controller.signal)
+      .then(setCategories)
+      .catch(() => {
+        // Keep the all-products link when categories cannot be loaded.
+      });
+
+    return () => controller.abort();
+  }, []);
+
+  const levelTwoCategories = useMemo(
+    () => getLevelTwoProductCategories(categories),
+    [categories],
+  );
+
+  const renderCategoryLinks = () => (
+    <>
+      <Link href="/products" onClick={onNavigate}>
+        همه ماشین‌آلات
+        <small>ALL PRODUCTS</small>
+      </Link>
+      {levelTwoCategories.map((category) => (
+        <Link
+          href={categoryPath(category)}
+          key={category.id}
+          onClick={onNavigate}
+        >
+          {category.nameFa || category.name}
+          <small dir="ltr">{category.name}</small>
+        </Link>
+      ))}
+    </>
+  );
+
+  return (
+    <>
+      <nav className="desktop-nav" aria-label="ناوبری اصلی">
+        <Link className={active === "home" ? "active" : ""} href="/">
+          صفحه اصلی
+        </Link>
+        <div className="product-menu">
+          <Link
+            className={active === "products" ? "active" : ""}
+            href="/products"
+          >
+            محصولات
+            <ChevronDown size={14} />
+          </Link>
+          <div className="product-menu__dropdown">
+            <div>{renderCategoryLinks()}</div>
+          </div>
+        </div>
+        {navigationItems.slice(1).map((item) => (
+          <Link
+            className={item.key === active ? "active" : ""}
+            href={item.href}
+            key={item.label}
+          >
+            {item.label}
+          </Link>
+        ))}
+      </nav>
+
+      {mobileOpen && (
+        <nav className="mobile-nav" aria-label="ناوبری موبایل">
+          <Link href="/" onClick={onNavigate}>
+            صفحه اصلی
+            <ChevronLeft size={17} />
+          </Link>
+          <details className="mobile-product-menu">
+            <summary>
+              محصولات
+              <ChevronDown size={17} />
+            </summary>
+            <div>{renderCategoryLinks()}</div>
+          </details>
+          {navigationItems.slice(1).map((item) => (
+            <Link href={item.href} key={item.label} onClick={onNavigate}>
+              {item.label}
+              <ChevronLeft size={17} />
+            </Link>
+          ))}
+        </nav>
+      )}
+    </>
+  );
+}