Build Hediyeh Maison portfolio website
This commit is contained in:
amirhosein.ashourloo
@@ -0,0 +1,209 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faBars, faChevronDown, faUser, faXmark } from "@fortawesome/free-solid-svg-icons";
|
||||
import {
|
||||
businessDashboardUrl,
|
||||
customerDashboardUrl,
|
||||
navLinks,
|
||||
} from "@/lib/site-config";
|
||||
|
||||
type HeaderSession = {
|
||||
name: string;
|
||||
isAdmin: boolean;
|
||||
};
|
||||
|
||||
export default function Header() {
|
||||
const pathname = usePathname();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const [session, setSession] = useState<HeaderSession | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => setScrolled(window.scrollY > 12);
|
||||
onScroll();
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", onScroll);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
|
||||
fetch("/api/auth/session", {
|
||||
credentials: "same-origin",
|
||||
signal: controller.signal,
|
||||
cache: "no-store",
|
||||
})
|
||||
.then((response) => (response.ok ? response.json() : { user: null }))
|
||||
.then((data: { user?: HeaderSession | null }) => setSession(data.user || null))
|
||||
.catch(() => undefined);
|
||||
|
||||
return () => controller.abort();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
|
||||
const previousOverflow = document.body.style.overflow;
|
||||
const closeOnEscape = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") setOpen(false);
|
||||
};
|
||||
|
||||
document.body.style.overflow = "hidden";
|
||||
window.addEventListener("keydown", closeOnEscape);
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = previousOverflow;
|
||||
window.removeEventListener("keydown", closeOnEscape);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<header
|
||||
className={`sticky top-0 z-50 transition-colors ${
|
||||
pathname === "/" && !scrolled ? "bg-cream" : "bg-white shadow-[0_1px_0_0_#e6e6e6]"
|
||||
}`}
|
||||
>
|
||||
<div className="mx-auto flex h-16 max-w-7xl flex-row-reverse items-center justify-between px-5 sm:px-8 lg:h-20 lg:flex-row">
|
||||
<Link href="/" className="flex items-center gap-2" aria-label="هدیه مزون - صفحه اصلی">
|
||||
<Image
|
||||
src="/images/brand/logo.png"
|
||||
alt="هدیه مزون"
|
||||
width={112}
|
||||
height={55}
|
||||
className="h-8 w-auto lg:h-9"
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden items-center gap-9 lg:flex" aria-label="پیمایش اصلی">
|
||||
{navLinks.map((link) => {
|
||||
const active = pathname === link.href;
|
||||
return (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className={`text-[15px] transition-colors hover:text-primary ${
|
||||
active ? "text-primary" : "text-ink"
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div dir="ltr" className="flex items-center gap-3 lg:flex-row-reverse lg:gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="grid h-10 w-10 place-items-center rounded-full border border-ink/15 lg:hidden"
|
||||
aria-label={open ? "بستن منو" : "باز کردن منو"}
|
||||
aria-expanded={open}
|
||||
aria-controls="mobile-navigation"
|
||||
>
|
||||
<FontAwesomeIcon icon={open ? faXmark : faBars} className="text-base" />
|
||||
</button>
|
||||
{session ? (
|
||||
<details dir="rtl" className="group relative">
|
||||
<summary className="flex h-10 cursor-pointer list-none items-center gap-2 rounded-full border border-ink/15 px-3 text-sm text-ink transition-colors hover:border-primary hover:text-primary marker:content-none [&::-webkit-details-marker]:hidden">
|
||||
<FontAwesomeIcon icon={faUser} aria-hidden="true" className="text-sm" />
|
||||
<span>{session.name} عزیز</span>
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronDown}
|
||||
aria-hidden="true"
|
||||
className="text-[10px] transition-transform group-open:rotate-180"
|
||||
/>
|
||||
</summary>
|
||||
<div className="absolute left-0 top-[calc(100%+10px)] z-50 min-w-44 overflow-hidden rounded-xl border border-border bg-white py-2 shadow-lg shadow-black/5">
|
||||
<a
|
||||
href={customerDashboardUrl}
|
||||
className="block px-4 py-2.5 text-sm text-ink transition-colors hover:bg-cream hover:text-primary"
|
||||
>
|
||||
پروفایل من
|
||||
</a>
|
||||
{session.isAdmin && (
|
||||
<a
|
||||
href={businessDashboardUrl}
|
||||
className="block px-4 py-2.5 text-sm text-ink transition-colors hover:bg-cream hover:text-primary"
|
||||
>
|
||||
مدیریت وبسایت
|
||||
</a>
|
||||
)}
|
||||
<form action="/api/auth/logout" method="post" className="border-t border-border">
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full px-4 py-2.5 text-right text-sm text-ink transition-colors hover:bg-cream hover:text-primary"
|
||||
>
|
||||
خروج
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</details>
|
||||
) : (
|
||||
<a
|
||||
href={`${customerDashboardUrl}/login?redirect=%2F`}
|
||||
className="grid h-10 w-10 place-items-center rounded-full border border-ink/15 text-ink transition-colors hover:border-primary hover:text-primary"
|
||||
aria-label="ورود یا حساب کاربری"
|
||||
title="ورود یا حساب کاربری"
|
||||
>
|
||||
<FontAwesomeIcon icon={faUser} aria-hidden="true" className="text-sm" />
|
||||
</a>
|
||||
)}
|
||||
<Link
|
||||
dir="rtl"
|
||||
href="/contact"
|
||||
className="hidden rounded-full border border-ink/15 px-5 py-2 text-sm transition-colors hover:border-primary hover:text-primary lg:inline-block"
|
||||
>
|
||||
تماس با ما
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
aria-label="بستن منوی موبایل"
|
||||
aria-hidden={!open}
|
||||
tabIndex={open ? 0 : -1}
|
||||
onClick={() => setOpen(false)}
|
||||
className={`fixed inset-x-0 bottom-0 top-16 z-40 bg-black/15 backdrop-blur-sm transition-opacity duration-300 lg:hidden ${
|
||||
open ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
|
||||
}`}
|
||||
/>
|
||||
|
||||
<div
|
||||
id="mobile-navigation"
|
||||
aria-hidden={!open}
|
||||
inert={!open}
|
||||
className={`fixed bottom-0 right-0 top-16 z-50 w-[min(82vw,320px)] border-l border-border bg-white shadow-[-12px_0_30px_rgba(36,31,26,0.08)] transition-transform duration-300 ease-out lg:hidden ${
|
||||
open ? "translate-x-0" : "translate-x-full"
|
||||
}`}
|
||||
>
|
||||
<nav
|
||||
className="h-full overflow-y-auto bg-white px-5 py-6"
|
||||
aria-label="پیمایش موبایل"
|
||||
>
|
||||
<ul className="flex flex-col gap-1">
|
||||
{navLinks.map((link) => (
|
||||
<li key={link.href}>
|
||||
<Link
|
||||
href={link.href}
|
||||
onClick={() => setOpen(false)}
|
||||
className={`block rounded-lg px-3 py-3 text-[15px] ${
|
||||
pathname === link.href ? "bg-cream-deep/50 text-primary" : "text-ink"
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user