diff --git a/src/Components/Nav/Navbar.jsx b/src/Components/Nav/Navbar.jsx index 8e79054..4afaf6c 100644 --- a/src/Components/Nav/Navbar.jsx +++ b/src/Components/Nav/Navbar.jsx @@ -1,698 +1,10 @@ -// import React, { useState, useEffect } from "react"; -// import styled from "styled-components"; -// import { useTranslation } from "react-i18next"; -// import { Link, animateScroll as scroll } from "react-scroll"; - -// const SunIcon = ({ className }) => ( -// -// -// -// -// -// -// -// -// -// ); -// const MoonIcon = ({ className }) => ( -// -// -// -// ); -// const GlobeIcon = ({ className }) => ( -// -// -// -// -// -// ); - -// const StyledWrapper = styled.div` -// /* Base Styles */ -// .switch { -// display: inline-block; -// /* reduced a bit */ -// width: 5.2em; -// height: 2.6em; -// position: relative; -// font-size: 16px; -// user-select: none; -// margin: 0; -// transform-origin: center; -// } - -// /* Hide default HTML checkbox */ -// .switch input { -// opacity: 0; -// width: 0; -// height: 0; -// position: absolute; -// } - -// /* Slider */ -// .slider { -// position: absolute; -// cursor: pointer; -// top: 0; -// left: 0; -// right: 0; -// bottom: 0; -// background: linear-gradient(to right, #87ceeb, #e0f6ff); -// border-radius: 50px; -// transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); -// box-shadow: -// 0 4px 8px rgba(0, 0, 0, 0.1), -// inset 0 -5px 10px rgba(0, 0, 0, 0.1); -// overflow: hidden; -// } - -// /* Inner slider for additional styling */ -// .slider-inner { -// position: absolute; -// top: 0.28em; -// left: 0.28em; -// height: 2.1em; -// width: 2.1em; -// border-radius: 50%; -// background-color: #ffd700; -// transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); -// box-shadow: -// 0 2px 4px rgba(0, 0, 0, 0.2), -// inset 0 -2px 5px rgba(0, 0, 0, 0.2); -// } - -// /* Checked state */ -// .switch input:checked + .slider { -// background: linear-gradient(to right, #1a237e, #3949ab); -// } - -// .switch input:checked + .slider .slider-inner { -// transform: translateX(2.6em); -// background-color: #ffffff; -// } - -// /* Focus state */ -// .switch input:focus + .slider { -// outline: none; -// box-shadow: 0 0 0.4em rgba(25, 118, 210, 0.5); -// } - -// /* Hover and active states */ -// .switch:hover .slider { -// background: linear-gradient(to right, #64b5f6, #e3f2fd); -// } - -// .switch input:checked:hover + .slider { -// background: linear-gradient(to right, #283593, #5c6bc0); -// } - -// /* Animation for slider inner */ -// @keyframes sunPulse { -// 0%, -// 100% { -// box-shadow: -// 0 0 0 0 rgba(255, 215, 0, 0.7), -// 0 0 0 0 rgba(255, 215, 0, 0.4); -// } -// 50% { -// box-shadow: -// 0 0 20px 10px rgba(255, 215, 0, 0.7), -// 0 0 40px 20px rgba(255, 215, 0, 0.4); -// } -// } - -// @keyframes moonPhase { -// 0%, -// 100% { -// box-shadow: -// inset -10px -5px 0 0 #ddd, -// 0 0 20px rgba(255, 255, 255, 0.5); -// } -// 50% { -// box-shadow: -// inset 0 0 0 0 #ddd, -// 0 0 20px rgba(255, 255, 255, 0.5); -// } -// } - -// .switch input:not(:checked) + .slider .slider-inner { -// animation: sunPulse 3s infinite; -// } - -// .switch input:checked + .slider .slider-inner { -// animation: moonPhase 5s infinite; -// } - -// /* Stars effect */ -// @keyframes twinkle { -// 0%, -// 100% { -// opacity: 0.2; -// } -// 50% { -// opacity: 1; -// } -// } - -// .slider::before, -// .slider::after { -// content: ""; -// position: absolute; -// width: 4px; -// height: 4px; -// background-color: #ffffff; -// border-radius: 50%; -// transition: all 0.6s ease; -// opacity: 0; -// } - -// .slider::before { -// top: 20%; -// left: 30%; -// } - -// .slider::after { -// bottom: 25%; -// right: 25%; -// } - -// .switch input:checked + .slider::before, -// .switch input:checked + .slider::after { -// opacity: 1; -// animation: twinkle 2s infinite; -// } - -// .switch input:checked + .slider::before { -// animation-delay: 0.5s; -// } - -// /* 3D effect */ -// .slider { -// transform-style: preserve-3d; -// perspective: 500px; -// } - -// .slider-inner { -// transform: translateZ(5px); -// } - -// .switch input:checked + .slider .slider-inner { -// transform: translateX(2.6em) translateZ(5px) rotateY(180deg); -// } - -// /* Cloud effect for day mode */ -// .slider-inner::before, -// .slider-inner::after { -// content: ""; -// position: absolute; -// background-color: rgba(255, 255, 255, 0.8); -// border-radius: 50%; -// transition: all 0.6s ease; -// } - -// .slider-inner::before { -// width: 1em; -// height: 1em; -// top: -0.5em; -// left: -0.2em; -// } - -// .slider-inner::after { -// width: 1.2em; -// height: 1.2em; -// bottom: -0.6em; -// right: -0.3em; -// } - -// .switch input:checked + .slider .slider-inner::before, -// .switch input:checked + .slider .slider-inner::after { -// opacity: 0; -// } - -// /* Crater effect for night mode */ -// .switch input:checked + .slider .slider-inner::before { -// width: 0.6em; -// height: 0.6em; -// background-color: rgba(0, 0, 0, 0.2); -// top: 0.3em; -// left: 0.3em; -// opacity: 1; -// } - -// .switch input:checked + .slider .slider-inner::after { -// width: 0.4em; -// height: 0.4em; -// background-color: rgba(0, 0, 0, 0.15); -// bottom: 0.5em; -// right: 0.5em; -// opacity: 1; -// } - -// /* Accessibility improvements */ -// .switch input:focus + .slider { -// outline: 2px solid #4a90e2; -// outline-offset: 2px; -// } - -// /* Responsive adjustments */ -// @media (max-width: 768px) { -// .switch { -// width: 4.6em; -// height: 2.3em; -// } - -// .slider-inner { -// height: 1.85em; -// width: 1.85em; -// top: 0.23em; -// left: 0.23em; -// } - -// .switch input:checked + .slider .slider-inner { -// transform: translateX(2.2em) translateZ(5px) rotateY(180deg); -// } -// } - -// @media (max-width: 480px) { -// .switch { -// width: 3.8em; -// height: 1.9em; -// } - -// .slider-inner { -// height: 1.5em; -// width: 1.5em; -// top: 0.2em; -// left: 0.2em; -// } - -// .switch input:checked + .slider .slider-inner { -// transform: translateX(1.8em) translateZ(5px) rotateY(180deg); -// } -// } - -// /* High contrast mode */ -// @media (forced-colors: active) { -// .slider { -// background: Canvas; -// border: 2px solid ButtonText; -// } - -// .switch input:checked + .slider { -// background: Highlight; -// } - -// .slider-inner { -// background-color: ButtonFace; -// } - -// .switch::before, -// .switch::after { -// color: ButtonText; -// } -// } - -// /* Reduced motion preference */ -// @media (prefers-reduced-motion: reduce) { -// .switch, -// .slider, -// .slider-inner { -// transition: none; -// } - -// .switch input:checked + .slider .slider-inner, -// .switch input:not(:checked) + .slider .slider-inner, -// .switch input:checked + .slider::before, -// .switch input:checked + .slider::after { -// animation: none; -// } -// } -// `; - -// const ThemeToggle = ({ theme, setTheme }) => { -// const isDark = theme === "dark"; - -// const toggle = () => { -// const next = isDark ? "light" : "dark"; -// setTheme(next); -// if (next === "dark") document.documentElement.classList.add("dark"); -// else document.documentElement.classList.remove("dark"); -// try { -// localStorage.setItem("theme", next); -// } catch (e) {} -// }; - -// return ( -// -// -// -// ); -// }; - -// const LanguageToggle = ({ i18n }) => { -// const isAr = i18n.language === "ar"; -// const toggle = () => { -// const next = isAr ? "en" : "ar"; -// i18n.changeLanguage(next); -// if (next === "ar") { -// document.documentElement.dir = "rtl"; -// document.documentElement.lang = "ar"; -// } else { -// document.documentElement.dir = "ltr"; -// document.documentElement.lang = next; -// } -// }; - -// return ( -// -// ); -// }; - -// const Navbar = () => { -// const { t, i18n } = useTranslation(); -// const [menuOpen, setMenuOpen] = useState(false); -// const [activeSection, setActiveSection] = useState("home"); -// const [theme, setTheme] = useState("light"); - -// useEffect(() => { -// try { -// const saved = localStorage.getItem("theme"); -// if (saved) setTheme(saved); -// else if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark"); -// } catch (e) { -// if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark"); -// } -// }, []); - -// useEffect(() => { -// if (theme === "dark") document.documentElement.classList.add("dark"); -// else document.documentElement.classList.remove("dark"); -// }, [theme]); - -// 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); -// }, []); - -// 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; - - -import React, { useState, useEffect } from "react"; +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 LanguageSwitcher from "../LanguageSwitcher/LanguageSwitcher"; +import { FcGlobe } from "react-icons/fc"; +/* ----------------- Icons (unchanged) ----------------- */ const SunIcon = ({ className }) => ( @@ -710,6 +22,8 @@ const MoonIcon = ({ className }) => ( ); +/* ----------------- ThemeToggle styles (RESTORED EXACTLY AS ORIGINAL) ----------------- */ +/* kept exactly the same as your original ThemeToggle styles so its look didn't change */ const StyledWrapper = styled.div` /* Base Styles */ .switch { @@ -1011,6 +325,7 @@ const StyledWrapper = styled.div` } `; +/* ----------------- ThemeToggle component (exactly as original) ----------------- */ const ThemeToggle = ({ currentTheme, toggleTheme }) => { const isDark = currentTheme === "dark"; @@ -1042,16 +357,121 @@ const ThemeToggle = ({ currentTheme, toggleTheme }) => { ); }; +/* ----------------- Internal LanguageSwitcher (restricted to EN/AR only) ----------------- */ +const InternalLanguageSwitcher = ({ className, i18n }) => { + const [open, setOpen] = useState(false); + const ref = useRef(null); + const current = i18n.language?.startsWith("ar") ? "ar" : "en"; + + 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 && ( +
+ + +
+ )} +
+ ); +}; + +/* ----------------- Navbar component ----------------- */ 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) { @@ -1064,7 +484,7 @@ const Navbar = ({ toggleTheme, currentTheme }) => { } } }; - + handleScroll(); window.addEventListener("scroll", handleScroll, { passive: true }); return () => window.removeEventListener("scroll", handleScroll); @@ -1090,7 +510,23 @@ const Navbar = ({ toggleTheme, currentTheme }) => { return ( <>