Initial deploy

components/navbar.tsx

@@ -0,0 +1,78 @@
+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 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="min-w-0 max-w-[68vw] md:max-w-fit">
+          <div className={`flex items-center gap-4 ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
+            <div className="logo-shell overflow-hidden rounded-[20px] border p-2">
+              <Image
+                src={sharedProfile.logoImage}
+                alt={language === "ar" ? "\u0634\u0639\u0627\u0631 \u063a\u0631\u064a\u0633 \u0628\u0637\u0631\u0633 \u0633\u0644\u0645\u0648\u0646" : "Grace Butrus Salmoun logo"}
+                width={60}
+                height={60}
+                className="h-[60px] w-[60px] rounded-[14px] object-contain"
+              />
+            </div>
+            <div className={`min-w-0 ${dir === "rtl" ? "text-right" : ""}`}>
+              <p className="type-brand display-face text-[var(--color-ink)]">
+                {brandName}
+              </p>
+              <p className="type-label mt-1 hidden tracking-[0.18em] text-[var(--color-muted)] sm:block">
+                {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" : ""}`}>
+            <ThemeToggle language={language} />
+            <LanguageToggle language={language} />
+          </div>
+        </div>
+
+        <div className={`flex items-center gap-2 md:hidden ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
+          <ThemeToggle language={language} />
+          <LanguageToggle language={language} />
+          <MobileNav
+            items={navItems}
+            dir={dir}
+            openLabel={language === "ar" ? "فتح القائمة" : "Open menu"}
+            closeLabel={language === "ar" ? "إغلاق القائمة" : "Close menu"}
+          />
+        </div>
+      </div>
+    </header>
+  );
+}