create
This commit is contained in:
amirhosein.ashourloo
@@ -0,0 +1,244 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Logo from "./Logo";
|
||||
import SearchBox from "./SearchBox";
|
||||
import {
|
||||
BagIcon,
|
||||
ChevronDownIcon,
|
||||
CloseIcon,
|
||||
InstagramIcon,
|
||||
MenuIcon,
|
||||
TelegramIcon,
|
||||
WhatsappIcon,
|
||||
} from "./icons";
|
||||
import { headerNavLinks } from "@/data/site";
|
||||
import { CUSTOMER_PORTAL_URL } from "@/lib/config";
|
||||
import type { CategoryNode } from "@/lib/types";
|
||||
|
||||
const socialLinks = [
|
||||
{ icon: InstagramIcon, label: "اینستاگرام" },
|
||||
{ icon: TelegramIcon, label: "تلگرام" },
|
||||
{ icon: WhatsappIcon, label: "واتساپ" },
|
||||
];
|
||||
|
||||
export default function Header({ categoryColumns }: { categoryColumns: CategoryNode[] }) {
|
||||
const [productsOpen, setProductsOpen] = useState(false);
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const [mobileCategoriesOpen, setMobileCategoriesOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-surface pt-2 md:pt-3 pb-0">
|
||||
<div className="boxed">
|
||||
<div className="rounded-2xl shadow-sm border border-line/60">
|
||||
{/* Row 1: logo / search / actions */}
|
||||
<div className="bg-white rounded-2xl lg:rounded-t-2xl lg:rounded-b-none flex h-16 md:h-20 items-center gap-3 md:gap-6 px-3 md:px-6">
|
||||
<button
|
||||
type="button"
|
||||
className="lg:hidden p-1.5 text-ink shrink-0"
|
||||
aria-label="باز کردن منو"
|
||||
onClick={() => setMobileOpen(true)}
|
||||
>
|
||||
<MenuIcon className="size-6" />
|
||||
</button>
|
||||
|
||||
<Logo />
|
||||
|
||||
<div className="hidden md:flex flex-1 items-center">
|
||||
<SearchBox />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 md:gap-3 ms-auto md:ms-0">
|
||||
<a
|
||||
href="#"
|
||||
className="relative flex items-center justify-center size-10 md:size-11 rounded-lg border border-line text-ink hover:border-brand hover:text-brand transition-colors"
|
||||
aria-label="سبد خرید"
|
||||
>
|
||||
<BagIcon className="size-5" />
|
||||
<span className="absolute -top-1.5 -end-1.5 flex items-center justify-center size-4.5 rounded-full bg-gold text-[10px] font-bold text-ink">
|
||||
0
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={CUSTOMER_PORTAL_URL}
|
||||
className="hidden sm:flex items-center gap-1.5 rounded-full bg-brand text-white text-xs md:text-sm font-bold px-4 md:px-5 h-10 md:h-11 hover:bg-brand-dark transition-colors whitespace-nowrap"
|
||||
>
|
||||
ورود <span className="text-white/50">|</span> ثبتنام
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 2: nav + socials */}
|
||||
<div className="hidden lg:flex bg-brand rounded-b-2xl items-center justify-between h-12 px-4 md:px-6">
|
||||
<nav className="flex items-center h-full">
|
||||
<div
|
||||
className="relative h-full flex items-center"
|
||||
onMouseEnter={() => setProductsOpen(true)}
|
||||
onMouseLeave={() => setProductsOpen(false)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-full items-center gap-1.5 px-4 text-sm font-medium text-white/90 hover:text-gold transition-colors"
|
||||
>
|
||||
محصولات
|
||||
<ChevronDownIcon className="size-4" />
|
||||
</button>
|
||||
|
||||
{productsOpen && categoryColumns.length > 0 && (
|
||||
<div className="absolute top-full start-0 min-w-[420px] bg-white border border-line shadow-lg p-6 flex flex-wrap gap-8 z-50">
|
||||
{categoryColumns.map((col) => (
|
||||
<div key={col.id} className="min-w-[180px]">
|
||||
<Link
|
||||
href={`/products?category=${col.slug}`}
|
||||
className="block font-bold text-ink text-sm mb-2.5 hover:text-brand transition-colors"
|
||||
>
|
||||
{col.nameFa}
|
||||
</Link>
|
||||
<ul className="space-y-1.5">
|
||||
{col.children.map((sub) => (
|
||||
<li key={sub.id}>
|
||||
<Link
|
||||
href={`/products?category=${sub.slug}`}
|
||||
className="text-[13px] text-body hover:text-gold-dark transition-colors"
|
||||
>
|
||||
{sub.nameFa}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{headerNavLinks.map((link) => (
|
||||
<a
|
||||
key={link.title}
|
||||
href={link.href}
|
||||
className="flex h-full items-center px-4 text-sm font-medium text-white/90 hover:text-gold transition-colors"
|
||||
>
|
||||
{link.title}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{socialLinks.map(({ icon: Icon, label }) => (
|
||||
<a
|
||||
key={label}
|
||||
href="#"
|
||||
aria-label={label}
|
||||
className="flex items-center justify-center size-8 rounded-md bg-white/10 text-white hover:bg-white/20 transition-colors"
|
||||
>
|
||||
<Icon className="size-4" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile drawer */}
|
||||
{mobileOpen && (
|
||||
<div className="fixed inset-0 z-[60] lg:hidden">
|
||||
<div
|
||||
className="absolute inset-0 bg-ink/50"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
/>
|
||||
<div className="absolute inset-y-0 start-0 w-[82%] max-w-xs bg-white flex flex-col">
|
||||
<div className="flex items-center justify-between h-16 px-4 border-b border-line">
|
||||
<Logo />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
aria-label="بستن منو"
|
||||
className="p-2 text-ink"
|
||||
>
|
||||
<CloseIcon className="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-4 overflow-y-auto">
|
||||
<div className="mb-4">
|
||||
<SearchBox placeholder="جستجو..." inputHeightClassName="h-10" />
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center justify-between py-3 text-sm font-bold text-ink border-b border-line"
|
||||
onClick={() => setMobileCategoriesOpen((v) => !v)}
|
||||
>
|
||||
محصولات
|
||||
<ChevronDownIcon
|
||||
className={`size-4 transition-transform ${
|
||||
mobileCategoriesOpen ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
{mobileCategoriesOpen && (
|
||||
<div className="py-2 ps-3 space-y-3 border-b border-line">
|
||||
{categoryColumns.map((col) => (
|
||||
<div key={col.id}>
|
||||
<Link
|
||||
href={`/products?category=${col.slug}`}
|
||||
className="block text-sm font-bold text-ink"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
{col.nameFa}
|
||||
</Link>
|
||||
<ul className="mt-1.5 ps-3 space-y-1.5">
|
||||
{col.children.map((sub) => (
|
||||
<li key={sub.id}>
|
||||
<Link
|
||||
href={`/products?category=${sub.slug}`}
|
||||
className="text-sm text-body"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
{sub.nameFa}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{headerNavLinks.map((link) => (
|
||||
<a
|
||||
key={link.title}
|
||||
href={link.href}
|
||||
className="block py-3 text-sm font-bold text-ink border-b border-line"
|
||||
>
|
||||
{link.title}
|
||||
</a>
|
||||
))}
|
||||
|
||||
<a
|
||||
href={CUSTOMER_PORTAL_URL}
|
||||
className="mt-5 flex items-center justify-center rounded-full bg-brand text-white text-sm font-bold h-11 hover:bg-brand-dark transition-colors"
|
||||
>
|
||||
ورود / ثبتنام
|
||||
</a>
|
||||
|
||||
<div className="mt-5 flex items-center justify-center gap-2">
|
||||
{socialLinks.map(({ icon: Icon, label }) => (
|
||||
<a
|
||||
key={label}
|
||||
href="#"
|
||||
aria-label={label}
|
||||
className="flex items-center justify-center size-9 rounded-md border border-line text-ink"
|
||||
>
|
||||
<Icon className="size-4" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user