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 ( ); }; 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 (
{open && (
)}
); }; 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 ( <> ); }; export default Navbar;