first commit

2026-09-02 17:03:23 +03:30
commit 1bd131e9d8
91 changed files with 11211 additions and 0 deletions
@@ -0,0 +1,114 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+import SearchBox from "./SearchBox";
+import AccountMenu from "./AccountMenu";
+import { CartIcon, ChevronDown, GridIcon, PhoneIcon } from "./icons";
+import { MAIN_NAV, PHONE, PHONE_HREF, SITE_NAME } from "@/data/site";
+import { CUSTOMER_PORTAL_URL } from "@/lib/config";
+import { categoryHref } from "@/lib/slug";
+import type { AuthUser, CategoryNode } from "@/lib/types";
+
+// Two rows: logo + search + account/cart, then the product mega menu and the
+// main nav — the same split the reference storefront uses.
+export default function Header({ menu, user }: { menu: CategoryNode[]; user: AuthUser | null }) {
+  const [megaOpen, setMegaOpen] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-40 w-full border-b border-line bg-white">
+      <div className="boxed">
+        {/* Mobile keeps the header down to the search box alone — account,
+            cart and browsing live in the fixed bottom bar instead. */}
+        <div className="flex h-[70px] items-center gap-4">
+          <Link href="/" className="hidden shrink-0 lg:block" aria-label={SITE_NAME}>
+            <Image src="/images/logo.png" alt={SITE_NAME} width={130} height={36} priority />
+          </Link>
+
+          <div className="flex-1">
+            <SearchBox />
+          </div>
+
+          <div className="mr-auto hidden items-center gap-2 lg:flex">
+            <AccountMenu user={user} />
+            <Link
+              href={`${CUSTOMER_PORTAL_URL}/cart`}
+              className="flex h-11 items-center gap-2 rounded-xl bg-brand px-3 text-[13px] text-white transition hover:bg-brand-dark"
+              aria-label="سبد خرید"
+            >
+              <CartIcon className="size-5" />
+              <span className="font-bold">۰</span>
+            </Link>
+          </div>
+        </div>
+
+        <nav className="hidden h-12 items-center gap-6 text-[13px] lg:flex">
+          <div
+            className="relative h-full"
+            onMouseEnter={() => setMegaOpen(true)}
+            onMouseLeave={() => setMegaOpen(false)}
+          >
+            <button
+              className="flex h-full items-center gap-2 font-bold text-ink transition hover:text-brand"
+              aria-expanded={megaOpen}
+            >
+              <GridIcon className="size-5" />
+              منو محصولات
+              <ChevronDown className="size-4" />
+            </button>
+
+            {megaOpen && menu.length > 0 && (
+              <div className="absolute right-0 top-full z-50 w-[900px] rounded-b-2xl border border-line bg-white p-6 shadow-xl">
+                <div className="grid grid-cols-4 gap-x-6 gap-y-5">
+                  {menu.map((cat) => (
+                    <div key={cat.id}>
+                      <Link
+                        href={categoryHref(cat.id, cat.nameFa, cat.name)}
+                        className="mb-2 block font-bold text-ink transition hover:text-brand"
+                      >
+                        {cat.nameFa || cat.name}
+                      </Link>
+                      <ul className="space-y-1.5">
+                        {cat.children.slice(0, 6).map((child) => (
+                          <li key={child.id}>
+                            <Link
+                              href={categoryHref(child.id, child.nameFa, child.name)}
+                              className="text-[12.5px] text-body transition hover:text-brand"
+                            >
+                              {child.nameFa || child.name}
+                            </Link>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {MAIN_NAV.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`transition hover:text-brand ${
+                item.highlight ? "font-bold text-brand" : "text-ink-soft"
+              }`}
+            >
+              {item.label}
+            </Link>
+          ))}
+
+          <a
+            href={PHONE_HREF}
+            className="mr-auto flex items-center gap-2 text-ink-soft transition hover:text-brand"
+          >
+            <PhoneIcon className="size-4" />
+            <span className="font-bold">{PHONE}</span>
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+}