فرانت‌اند: نسخه انگلیسی با مسیر /en/ — مسیریابی دوزبانه، دیکشنری رابط، بومی‌سازی داده، تغییر زبان در هدر، ویرایش انگلیسی در پنل و پشتیبانی LTR

frontend/src/components/Header.tsx

@@ -2,12 +2,15 @@ import React, { useEffect, useState } from "react";
 import { Link, NavLink, useLocation } from "react-router-dom";
 import { MenuIcon, PhoneIcon, XIcon } from "lucide-react";
 import { useSite } from "../api";
+import { useLang } from "../i18n/lang";
 import { useFieldSaver } from "../admin/AdminContext";
 import { InlineEdit } from "./admin/InlineEdit";
 import { EditableItem, SingletonPill } from "../admin/Editable";
+import { LangToggle } from "./LangToggle";
 
 export function Header() {
   const { brand, nav } = useSite();
+  const { t, href } = useLang();
   const save = useFieldSaver();
 
   const saveNav = (id: number, changes: Record<string, unknown>) =>
@@ -40,7 +43,7 @@ export function Header() {
       <div className="mx-auto flex max-w-site items-center justify-between gap-8 px-6 py-4 lg:px-10">
         <div className="relative flex items-center">
           <Link
-            to="/"
+            to={href("/")}
             className="flex items-center gap-3"
             aria-label={brand.name}
           >
@@ -52,16 +55,16 @@ export function Header() {
               }`}
             />
           </Link>
-          <SingletonPill resource="brand" label="ویرایش برند و لوگو" className="absolute -left-10 top-1/2 -translate-y-1/2" />
+          <SingletonPill resource="brand" label="ویرایش برند و لوگو" className="absolute top-1/2 -translate-y-1/2 ltr:-right-10 rtl:-left-10" />
         </div>
 
-        <nav aria-label="ناوبری اصلی" className="hidden xl:block">
+        <nav aria-label={t("mainNav")} className="hidden xl:block">
           <ul className="flex items-center gap-7">
             {nav.map((item) => (
               <EditableItem key={item.id} resource="nav" item={item}>
                 <li>
                   <NavLink
-                    to={item.href}
+                    to={href(item.href)}
                     className={({ isActive }) =>
                       `group relative py-2 text-[0.95rem] font-light transition-colors duration-200 ease-lux hover:text-copper [text-shadow:_0_2px_4px_rgba(0,0,0,0.6)] ${
                         isActive ? "text-copper font-normal" : "text-ivory/80"
@@ -102,12 +105,15 @@ export function Header() {
             <span dir="ltr" className="tracking-wide">{brand.phone}</span>
           </a>
 
+          {/* تغییر زبان — فارسی/انگلیسی */}
+          <LangToggle />
+
           {/* دکمه منوی موبایل دایره‌ای شیشه‌ای */}
           <button
             type="button"
             onClick={() => setOpen((v) => !v)}
             className="flex h-11 w-11 items-center justify-center rounded-full border border-white/15 bg-white/5 text-ivory backdrop-blur-lg shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)] transition-all duration-300 ease-lux hover:border-copper/60 hover:bg-white/10 hover:text-copper active:scale-95 xl:hidden"
-            aria-label={open ? "بستن منو" : "باز کردن منو"}
+            aria-label={open ? t("closeMenu") : t("openMenu")}
             aria-expanded={open}
           >
             {open ? (
@@ -121,7 +127,7 @@ export function Header() {
 
       {open && (
         <nav
-          aria-label="ناوبری موبایل"
+          aria-label={t("mobileNav")}
           className="border-t border-white/10 bg-ink/95 backdrop-blur-2xl px-6 py-4 xl:hidden shadow-2xl"
         >
           <ul className="grid gap-1">
@@ -129,7 +135,7 @@ export function Header() {
               <EditableItem key={item.id} resource="nav" item={item}>
                 <li>
                   <NavLink
-                    to={item.href}
+                    to={href(item.href)}
                     className={({ isActive }) =>
                       `block border-b border-ivory/5 py-3 text-base font-light transition-colors duration-200 ease-lux ${
                         isActive ? "text-copper" : "text-ivory/80"
@@ -149,4 +155,4 @@ export function Header() {
       )}
     </header>
   );
-}
+}