Added translation
This commit is contained in:
Rahaf
@ -2,363 +2,51 @@ 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 { FcGlobe } from "react-icons/fc";
|
||||
import { FiSun, FiMoon, FiGlobe } from "react-icons/fi";
|
||||
import { MdOutlineDarkMode, MdOutlineLightMode } from "react-icons/md";
|
||||
|
||||
/* ----------------- Icons (unchanged) ----------------- */
|
||||
const SunIcon = ({ className }) => (
|
||||
<svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
|
||||
<path d="M12 4v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M12 18v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M4.22 4.22l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M18.36 18.36l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M1 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M21 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.6" />
|
||||
</svg>
|
||||
);
|
||||
const MoonIcon = ({ className }) => (
|
||||
<svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
|
||||
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
/* ----------------- 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 {
|
||||
display: inline-block;
|
||||
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;
|
||||
.theme-toggle-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: ${props => props.theme === 'dark' ? '#FFD700' : '#FF8C00'};
|
||||
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;
|
||||
padding: 0.5rem;
|
||||
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);
|
||||
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);
|
||||
}
|
||||
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;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
/* ----------------- ThemeToggle component (exactly as original) ----------------- */
|
||||
const ThemeToggle = ({ currentTheme, toggleTheme }) => {
|
||||
const isDark = currentTheme === "dark";
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<label
|
||||
role="switch"
|
||||
aria-checked={isDark}
|
||||
tabIndex={0}
|
||||
className="switch"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
toggleTheme();
|
||||
}
|
||||
}}
|
||||
<StyledWrapper theme={currentTheme}>
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="theme-toggle-btn"
|
||||
aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isDark}
|
||||
onChange={toggleTheme}
|
||||
aria-hidden="false"
|
||||
/>
|
||||
<span className="slider" aria-hidden="true">
|
||||
<span className="slider-inner" />
|
||||
</span>
|
||||
</label>
|
||||
{isDark ? <FiSun size={24} /> : <FiMoon size={24} />}
|
||||
</button>
|
||||
</StyledWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
/* ----------------- Internal LanguageSwitcher (restricted to EN/AR only) ----------------- */
|
||||
const InternalLanguageSwitcher = ({ className, i18n }) => {
|
||||
const LanguageSwitcher = ({ i18n }) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef(null);
|
||||
const current = i18n.language?.startsWith("ar") ? "ar" : "en";
|
||||
@ -378,27 +66,28 @@ const InternalLanguageSwitcher = ({ className, i18n }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={ref} className={className} style={{ position: "relative", display: "inline-flex", alignItems: "center" }}>
|
||||
<div ref={ref} style={{ position: "relative", display: "inline-flex", alignItems: "center" }}>
|
||||
<button
|
||||
type="button"
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open}
|
||||
onClick={() => setOpen((s) => !s)}
|
||||
className="lang-switch-btn"
|
||||
style={{
|
||||
padding: "0.28rem 0.5rem",
|
||||
borderRadius: "0.5rem",
|
||||
padding: "0.5rem",
|
||||
borderRadius: "50%",
|
||||
border: "none",
|
||||
background: "transparent",
|
||||
color: "inherit",
|
||||
fontWeight: 700,
|
||||
cursor: "pointer",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
transition: "all 0.3s ease",
|
||||
fontSize: "1.5rem",
|
||||
}}
|
||||
className="lang-toggle-btn"
|
||||
>
|
||||
<FcGlobe size={28} />
|
||||
<FiGlobe size={24} />
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
@ -420,9 +109,10 @@ const InternalLanguageSwitcher = ({ className, i18n }) => {
|
||||
<button
|
||||
onClick={() => changeLng("en")}
|
||||
role="menuitem"
|
||||
className={`lang-item ${current === "en" ? "active" : ""}`}
|
||||
style={{
|
||||
display: "block",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
textAlign: "left",
|
||||
padding: "8px 10px",
|
||||
@ -431,16 +121,20 @@ const InternalLanguageSwitcher = ({ className, i18n }) => {
|
||||
color: "inherit",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
className={`lang-item ${current === "en" ? "active" : ""}`}
|
||||
>
|
||||
English
|
||||
<span>English</span>
|
||||
{current === "en" && <span style={{ fontSize: "0.9rem" }}>✓</span>}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => changeLng("ar")}
|
||||
role="menuitem"
|
||||
className={`lang-item ${current === "ar" ? "active" : ""}`}
|
||||
style={{
|
||||
display: "block",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
textAlign: "left",
|
||||
padding: "8px 10px",
|
||||
@ -449,10 +143,13 @@ const InternalLanguageSwitcher = ({ className, i18n }) => {
|
||||
color: "inherit",
|
||||
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>
|
||||
)}
|
||||
@ -460,7 +157,6 @@ const InternalLanguageSwitcher = ({ className, i18n }) => {
|
||||
);
|
||||
};
|
||||
|
||||
/* ----------------- Navbar component ----------------- */
|
||||
const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
@ -616,14 +312,28 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
.mobile-left-slot { display:flex; align-items:center; gap:0.5rem; }
|
||||
.mobile-right-slot { display:flex; align-items:center; gap:0.5rem; }
|
||||
|
||||
.lang-switch-btn {
|
||||
.lang-toggle-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 0.45rem;
|
||||
border-radius: 0.4rem;
|
||||
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>
|
||||
|
||||
@ -668,7 +378,7 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
|
||||
<div className="flex items-center gap-3 md:gap-5">
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
<InternalLanguageSwitcher i18n={i18n} />
|
||||
<LanguageSwitcher i18n={i18n} />
|
||||
<ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
|
||||
</div>
|
||||
|
||||
@ -694,14 +404,14 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
|
||||
<InternalLanguageSwitcher i18n={i18n} />
|
||||
<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} />
|
||||
<InternalLanguageSwitcher i18n={i18n} />
|
||||
<LanguageSwitcher i18n={i18n} />
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1 }} />
|
||||
@ -765,4 +475,4 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
export default Navbar;
|
||||
Reference in New Issue
Block a user