83 أسطر
3.6 KiB
TypeScript
83 أسطر
3.6 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { LanguageToggle } from "@/components/language-toggle";
|
|
import { MobileNav } from "@/components/mobile-nav";
|
|
import { NavLinks } from "@/components/nav-links";
|
|
import { ThemeToggle } from "@/components/theme-toggle";
|
|
import { getBasePath, getDirection, portfolioContent, sharedProfile, type Language } from "@/data/portfolio";
|
|
|
|
export function Navbar({ language }: { language: Language }) {
|
|
const dir = getDirection(language);
|
|
const t = portfolioContent[language].ui;
|
|
const brandName = language === "ar" ? sharedProfile.brandNameAr : sharedProfile.brandNameEn;
|
|
const basePath = getBasePath(language);
|
|
|
|
const navItems = [
|
|
{ label: t.navAbout, href: `${basePath}#about` },
|
|
{ label: t.navPhilosophy, href: `${basePath}#philosophy` },
|
|
{ label: t.navProjects, href: `${basePath}#projects` },
|
|
{ label: t.awards, href: `${basePath}#awards` },
|
|
{ label: t.navContact, href: `${basePath}#contact` },
|
|
];
|
|
|
|
return (
|
|
<header className="navbar-shell sticky top-0 z-50 border-b backdrop-blur-xl">
|
|
<div
|
|
className={`site-container navbar-layout relative flex items-center justify-between gap-4 py-4 ${
|
|
dir === "rtl" ? "md:flex-row-reverse md:justify-between" : "md:justify-between"
|
|
}`}
|
|
>
|
|
<Link href={basePath} className="navbar-brand-link min-w-0 max-w-[68vw] md:max-w-fit">
|
|
<div className={`navbar-brand-lockup flex items-center gap-4 ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
|
|
<div className="logo-shell navbar-logo-shell overflow-hidden rounded-[20px] border p-2">
|
|
<Image
|
|
src={sharedProfile.logoImage}
|
|
alt={language === "ar" ? "شعار غريس سلمون" : "Grace Salmoun logo"}
|
|
width={60}
|
|
height={60}
|
|
className="navbar-logo-image h-[60px] w-[60px] rounded-[14px] object-contain"
|
|
/>
|
|
</div>
|
|
<div className={`navbar-brand-copy min-w-0 ${dir === "rtl" ? "text-right" : ""}`}>
|
|
<p className="type-brand display-face hidden text-[var(--color-ink)] sm:block">{brandName}</p>
|
|
<p className="type-brand display-face navbar-brand-mobile text-[var(--color-ink)] sm:hidden">{brandName}</p>
|
|
<p className="type-label navbar-specialty mt-1 tracking-[0.18em] text-[var(--color-muted)]">
|
|
{t.architectureEngineer}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
|
|
<div
|
|
className={`hidden gap-3 md:flex md:flex-row md:items-center ${
|
|
dir === "rtl" ? "md:flex-row-reverse" : ""
|
|
}`}
|
|
>
|
|
<NavLinks items={navItems} alignEnd={dir !== "rtl"} />
|
|
|
|
<div className={`flex items-center gap-2 ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
|
|
<LanguageToggle language={language} />
|
|
<ThemeToggle language={language} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`navbar-mobile-controls flex items-center gap-2 md:hidden ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
|
|
<MobileNav
|
|
items={navItems}
|
|
dir={dir}
|
|
className="order-3"
|
|
openLabel={language === "ar" ? "فتح القائمة" : "Open menu"}
|
|
closeLabel={language === "ar" ? "إغلاق القائمة" : "Close menu"}
|
|
/>
|
|
<div className="order-2">
|
|
<LanguageToggle language={language} />
|
|
</div>
|
|
<div className="order-1">
|
|
<ThemeToggle language={language} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|