590 lines
20 KiB
JavaScript
590 lines
20 KiB
JavaScript
import React, { useState, useEffect, useRef } from "react";
|
|
import styled from "styled-components";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link, animateScroll as scroll } from "react-scroll";
|
|
import { FiSun, FiMoon, FiGlobe } from "react-icons/fi";
|
|
import { MdOutlineDarkMode, MdOutlineLightMode } from "react-icons/md";
|
|
|
|
const StyledWrapper = styled.div`
|
|
.theme-toggle-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: ${(props) => (props.theme === "dark" ? "#FFD700" : "#FF8C00")};
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
font-size: 1.5rem;
|
|
|
|
&:hover {
|
|
background: ${(props) =>
|
|
props.theme === "dark"
|
|
? "rgba(255, 215, 0, 0.1)"
|
|
: "rgba(255, 140, 0, 0.1)"};
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
`;
|
|
|
|
const ThemeToggle = ({ currentTheme, toggleTheme }) => {
|
|
const isDark = currentTheme === "dark";
|
|
|
|
return (
|
|
<StyledWrapper theme={currentTheme}>
|
|
<button
|
|
onClick={toggleTheme}
|
|
className="theme-toggle-btn"
|
|
aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
|
|
>
|
|
{isDark ? <FiSun size={24} /> : <FiMoon size={24} />}
|
|
</button>
|
|
</StyledWrapper>
|
|
);
|
|
};
|
|
|
|
const LanguageSwitcher = ({ i18n, currentTheme }) => {
|
|
const [open, setOpen] = useState(false);
|
|
const ref = useRef(null);
|
|
const current = i18n.language?.startsWith("ar") ? "ar" : "en";
|
|
const isDark = currentTheme === "dark";
|
|
|
|
useEffect(() => {
|
|
const onDocClick = (e) => {
|
|
if (ref.current && !ref.current.contains(e.target)) setOpen(false);
|
|
};
|
|
document.addEventListener("click", onDocClick);
|
|
return () => document.removeEventListener("click", onDocClick);
|
|
}, []);
|
|
|
|
const changeLng = (lng) => {
|
|
if (lng !== "ar" && lng !== "en") return;
|
|
i18n.changeLanguage(lng);
|
|
setOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
style={{
|
|
position: "relative",
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<button
|
|
type="button"
|
|
aria-haspopup="true"
|
|
aria-expanded={open}
|
|
onClick={() => setOpen((s) => !s)}
|
|
style={{
|
|
padding: "0.5rem",
|
|
borderRadius: "50%",
|
|
border: "none",
|
|
background: "transparent",
|
|
color: isDark ? "#e6e6e6" : "#313131",
|
|
cursor: "pointer",
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
transition: "all 0.3s ease",
|
|
fontSize: "1.5rem",
|
|
}}
|
|
className="lang-toggle-btn"
|
|
>
|
|
<FiGlobe size={24} />
|
|
</button>
|
|
|
|
{open && (
|
|
<div
|
|
role="menu"
|
|
aria-label="Language menu"
|
|
style={{
|
|
position: "absolute",
|
|
top: "calc(100% + 8px)",
|
|
right: 0,
|
|
background: isDark
|
|
? "linear-gradient(180deg, #446a85, #2d4b5f)"
|
|
: "#ffffff",
|
|
borderRadius: 8,
|
|
boxShadow: "0 8px 30px rgba(2,6,23,0.5)",
|
|
padding: "6px",
|
|
zIndex: 60,
|
|
minWidth: 96,
|
|
border: isDark ? "none" : "1px solid #e5e7eb",
|
|
}}
|
|
>
|
|
<button
|
|
onClick={() => changeLng("en")}
|
|
role="menuitem"
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
width: "100%",
|
|
textAlign: "left",
|
|
padding: "8px 10px",
|
|
borderRadius: 6,
|
|
background:
|
|
current === "en"
|
|
? isDark
|
|
? "rgba(255,183,77,0.12)"
|
|
: "#f3f4f6"
|
|
: "transparent",
|
|
color: isDark ? "inherit" : "#313131",
|
|
border: "none",
|
|
cursor: "pointer",
|
|
transition: "all 0.2s ease",
|
|
}}
|
|
className={`lang-item ${current === "en" ? "active" : ""}`}
|
|
>
|
|
<span>English</span>
|
|
{current === "en" && <span style={{ fontSize: "0.9rem" }}>✓</span>}
|
|
</button>
|
|
<button
|
|
onClick={() => changeLng("ar")}
|
|
role="menuitem"
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
width: "100%",
|
|
textAlign: "left",
|
|
padding: "8px 10px",
|
|
borderRadius: 6,
|
|
background:
|
|
current === "ar"
|
|
? isDark
|
|
? "rgba(255,183,77,0.12)"
|
|
: "#f3f4f6"
|
|
: "transparent",
|
|
color: isDark ? "inherit" : "#313131",
|
|
border: "none",
|
|
cursor: "pointer",
|
|
transition: "all 0.2s ease",
|
|
marginTop: 6,
|
|
}}
|
|
className={`lang-item ${current === "ar" ? "active" : ""}`}
|
|
>
|
|
<span>العربية</span>
|
|
{current === "ar" && <span style={{ fontSize: "0.9rem" }}>✓</span>}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Navbar = ({ toggleTheme, currentTheme }) => {
|
|
const { t, i18n } = useTranslation();
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
const [activeSection, setActiveSection] = useState("home");
|
|
const isRtl = i18n.language?.startsWith("ar");
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const sections = ["home", "services", "about", "contact"];
|
|
const scrollPosition = window.scrollY + 140;
|
|
|
|
for (const section of sections) {
|
|
const element =
|
|
document.getElementById(section) ||
|
|
document.querySelector(`[name="${section}"]`);
|
|
if (element) {
|
|
const offsetTop = element.offsetTop;
|
|
const offsetHeight = element.offsetHeight;
|
|
if (
|
|
scrollPosition >= offsetTop &&
|
|
scrollPosition < offsetTop + offsetHeight
|
|
) {
|
|
setActiveSection(section);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
handleScroll();
|
|
window.addEventListener("scroll", handleScroll, { passive: true });
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (i18n.language === "ar") {
|
|
document.documentElement.dir = "rtl";
|
|
document.documentElement.lang = "ar";
|
|
} else {
|
|
document.documentElement.dir = "ltr";
|
|
document.documentElement.lang = i18n.language;
|
|
}
|
|
}, [i18n.language]);
|
|
|
|
const navItems = [
|
|
{ key: "home", label: t("nav.home") || "Home" },
|
|
{ key: "services", label: t("nav.services") || "Services" },
|
|
{ key: "about", label: t("nav.about") || "About" },
|
|
{ key: "contact", label: t("nav.contact") || "Contact" },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<style>{`
|
|
html, body, a, button {
|
|
-webkit-tap-highlight-color: transparent;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
.nav-link, .nav-link *, .mobile-drawer a, .mobile-drawer a * {
|
|
text-decoration: none !important;
|
|
background-image: none !important;
|
|
-webkit-text-decoration-skip: none !important;
|
|
text-decoration-skip-ink: none !important;
|
|
}
|
|
|
|
.nav-link::after, .nav-link:after {
|
|
display: none !important;
|
|
content: none !important;
|
|
}
|
|
|
|
.glass-nav {
|
|
background: rgba(227, 232, 236, 0.9);
|
|
color: #313131;
|
|
border-bottom: 1px solid rgba(4, 28, 64, 0.1);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
.nav-link {
|
|
position: relative;
|
|
padding-bottom: 6px;
|
|
transition: transform .18s cubic-bezier(.2,.9,.2,1), color .15s ease, text-shadow .15s ease;
|
|
color: rgba(229,231,235,0.95);
|
|
display: inline-block;
|
|
}
|
|
|
|
.nav-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.32rem 0.6rem;
|
|
border-radius: 999px;
|
|
transition:
|
|
transform .18s cubic-bezier(.2,.9,.2,1),
|
|
background .14s ease,
|
|
box-shadow .14s ease,
|
|
color .12s ease;
|
|
background: transparent;
|
|
color: inherit;
|
|
line-height: 1;
|
|
font-weight: 600;
|
|
will-change: transform, box-shadow;
|
|
}
|
|
|
|
.nav-link:hover .nav-pill {
|
|
transform: translateY(-6px) scale(1.06);
|
|
box-shadow:
|
|
0 14px 40px rgba(224, 105, 35, 0.28),
|
|
0 6px 20px rgba(224, 105, 35, 0.08);
|
|
background: #e06923;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.nav-link.active .nav-pill,
|
|
.mobile-drawer .nav-pill.active {
|
|
background: #e06923 !important;
|
|
color: #ffffff !important;
|
|
transform: translateY(-3px) scale(1.03);
|
|
box-shadow: 0 8px 26px rgba(224, 105, 35, 0.25), 0 2px 6px rgba(0,0,0,0.12);
|
|
}
|
|
|
|
.nav-link:active .nav-pill,
|
|
.mobile-drawer a:active .nav-pill {
|
|
transition-duration: 0s !important;
|
|
transform: translateY(-3px) scale(1.03) !important;
|
|
background: #e06923 !important;
|
|
color: #ffffff !important;
|
|
box-shadow: 0 8px 26px rgba(224, 105, 35, 0.25) !important;
|
|
}
|
|
|
|
.nav-link:focus-visible .nav-pill,
|
|
.mobile-drawer a:focus-visible .nav-pill {
|
|
outline: none;
|
|
box-shadow: 0 0 0 6px rgba(224, 105, 35, 0.14), 0 8px 30px rgba(224, 105, 35, 0.12);
|
|
background: #e06923;
|
|
color: #ffffff;
|
|
transform: translateY(-3px) scale(1.02);
|
|
}
|
|
|
|
.glass-nav button:focus-visible,
|
|
.mobile-drawer button:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 6px rgba(255,165,0,0.12);
|
|
}
|
|
|
|
.nav-link:hover, .nav-link:visited, .mobile-drawer a:hover, .mobile-drawer a:visited {
|
|
text-decoration: none !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.nav-pill, .nav-link {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
.mobile-left-slot { display:flex; align-items:center; gap:0.5rem; }
|
|
.mobile-right-slot { display:flex; align-items:center; gap:0.5rem; }
|
|
|
|
.lang-toggle-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.lang-toggle-btn:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.theme-toggle-btn:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
transform: scale(1.1);
|
|
}
|
|
`}</style>
|
|
|
|
<nav
|
|
className="fixed top-0 left-0 right-0 z-50 w-full glass-nav px-4 md:px-8 lg:px-16 py-3"
|
|
aria-label="Main navigation"
|
|
role="navigation"
|
|
>
|
|
<div className="mx-auto max-w-screen-xl">
|
|
<div className="flex items-center justify-between h-14 px-2 md:px-4">
|
|
<div className="flex items-center gap-3">
|
|
<div
|
|
aria-hidden
|
|
className="logo-placeholder"
|
|
style={{ width: 36, height: 36 }}
|
|
/>
|
|
<div className="hidden md:flex items-center space-x-6 rtl:space-x-reverse ml-6">
|
|
<ul className="flex items-center gap-6">
|
|
{navItems.map((item) => {
|
|
const isActive = activeSection === item.key;
|
|
return (
|
|
<li key={item.key}>
|
|
<Link
|
|
to={item.key}
|
|
smooth
|
|
duration={600}
|
|
spy={true}
|
|
offset={-110}
|
|
onSetActive={() => setActiveSection(item.key)}
|
|
onClick={() => {
|
|
setActiveSection(item.key);
|
|
if (item.key === "home")
|
|
scroll.scrollToTop({ duration: 600 });
|
|
if (menuOpen) setMenuOpen(false);
|
|
}}
|
|
className={`nav-link cursor-pointer text-sm md:text-lg ${isActive ? "active" : ""}`}
|
|
style={{
|
|
color: isActive
|
|
? ""
|
|
: currentTheme === "dark"
|
|
? "rgba(229,231,235,0.95)"
|
|
: "#313131",
|
|
}}
|
|
aria-current={isActive ? "page" : undefined}
|
|
>
|
|
<span
|
|
className={`nav-pill ${isActive ? "active" : ""}`}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 md:gap-5">
|
|
<div className="hidden md:flex items-center gap-3">
|
|
<LanguageSwitcher i18n={i18n} currentTheme={currentTheme} />
|
|
<ThemeToggle
|
|
currentTheme={currentTheme}
|
|
toggleTheme={toggleTheme}
|
|
/>
|
|
</div>
|
|
|
|
<div className="md:hidden w-full">
|
|
{!isRtl ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<div style={{ display: "flex", alignItems: "center" }}>
|
|
<button
|
|
onClick={() => setMenuOpen((s) => !s)}
|
|
aria-controls="mobile-menu"
|
|
aria-expanded={menuOpen}
|
|
className="p-2 rounded-md focus:outline-none transition-transform hover:scale-105"
|
|
style={{ marginRight: 8 }}
|
|
>
|
|
<span className="sr-only">Open main menu</span>
|
|
<svg
|
|
className="h-6 w-6"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden
|
|
>
|
|
{menuOpen ? (
|
|
<path d="M6 18L18 6M6 6l12 12" />
|
|
) : (
|
|
<>
|
|
<path d="M3 6h18" />
|
|
<path d="M3 12h18" />
|
|
<path d="M3 18h18" />
|
|
</>
|
|
)}
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div style={{ flex: 1 }} />
|
|
|
|
<div
|
|
style={{ display: "flex", alignItems: "center", gap: 8 }}
|
|
>
|
|
<ThemeToggle
|
|
currentTheme={currentTheme}
|
|
toggleTheme={toggleTheme}
|
|
/>
|
|
<LanguageSwitcher i18n={i18n} />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<div
|
|
style={{ display: "flex", alignItems: "center", gap: 8 }}
|
|
>
|
|
<ThemeToggle
|
|
currentTheme={currentTheme}
|
|
toggleTheme={toggleTheme}
|
|
/>
|
|
<LanguageSwitcher i18n={i18n} />
|
|
</div>
|
|
|
|
<div style={{ flex: 1 }} />
|
|
|
|
<div>
|
|
<button
|
|
onClick={() => setMenuOpen((s) => !s)}
|
|
aria-controls="mobile-menu"
|
|
aria-expanded={menuOpen}
|
|
className="p-2 rounded-md focus:outline-none transition-transform hover:scale-105"
|
|
style={{ marginLeft: 8 }}
|
|
>
|
|
<span className="sr-only">Open main menu</span>
|
|
<svg
|
|
className="h-6 w-6"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden
|
|
>
|
|
{menuOpen ? (
|
|
<path d="M6 18L18 6M6 6l12 12" />
|
|
) : (
|
|
<>
|
|
<path d="M3 6h18" />
|
|
<path d="M3 12h18" />
|
|
<path d="M3 18h18" />
|
|
</>
|
|
)}
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="mobile-menu"
|
|
className={`md:hidden overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out ${menuOpen ? "max-h-[420px] opacity-100" : "max-h-0 opacity-0"}`}
|
|
>
|
|
<div className="mobile-drawer px-4 pb-6 pt-3 rounded-b-2xl">
|
|
<ul className="flex flex-col gap-2">
|
|
{navItems.map((item) => {
|
|
const isActive = activeSection === item.key;
|
|
return (
|
|
<li key={item.key}>
|
|
<Link
|
|
to={item.key}
|
|
smooth
|
|
duration={600}
|
|
spy={true}
|
|
offset={-110}
|
|
onSetActive={() => setActiveSection(item.key)}
|
|
onClick={() => {
|
|
setActiveSection(item.key);
|
|
if (item.key === "home")
|
|
scroll.scrollToTop({ duration: 600 });
|
|
setMenuOpen(false);
|
|
}}
|
|
className={`block w-full text-right px-3 py-2 rounded-md font-semibold text-base ${isActive ? "text-amber-400" : "text-[#313131] dark:text-slate-200 hover:text-amber-400"}`}
|
|
aria-current={isActive ? "page" : undefined}
|
|
>
|
|
<span
|
|
className={`nav-pill ${isActive ? "active" : ""}`}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|