Rahaf/REXNT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added background

Browse Source 
Added About
This commit is contained in:
Rahaf
2026-01-08 21:12:26 +03:00
parent be4a941730
commit 330a0d1ff1
13 changed files with 1520 additions and 624 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/Components/Nav/Navbar.jsx
View File

@ -4,44 +4,15 @@ import { Link } from "react-scroll";
import LanguageSwitcher from "../LanguageSwitcher/LanguageSwitcher";
import "../../index.css";
const Navbar = () => {
const Navbar = ({ toggleTheme, currentTheme }) => {
const { t, i18n } = useTranslation();
const [menuOpen, setMenuOpen] = useState(false);
const [activeSection, setActiveSection] = useState("home");
const [isDarkMode, setIsDarkMode] = useState(false);
// Initialize dark mode
useEffect(() => {
const savedTheme = localStorage.getItem("theme");
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
const shouldEnableDarkMode = savedTheme === "dark" || (!savedTheme && prefersDark);
setIsDarkMode(shouldEnableDarkMode);
if (shouldEnableDarkMode) {
document.documentElement.classList.add("dark");
}
}, []);
const toggleMenu = () => {
setMenuOpen(!menuOpen);
};
// Toggle dark/light mode
const toggleDarkMode = () => {
const newDarkMode = !isDarkMode;
setIsDarkMode(newDarkMode);
if (newDarkMode) {
document.documentElement.classList.add("dark");
localStorage.setItem("theme", "dark");
} else {
document.documentElement.classList.remove("dark");
localStorage.setItem("theme", "light");
}
};
// Handle scroll to update active section
useEffect(() => {
const handleScroll = () => {
const sections = ["home", "services", "about", "contact"];
@ -70,7 +41,6 @@ const Navbar = () => {
return () => window.removeEventListener("scroll", handleScroll);
}, []);
// Update document direction when language changes
useEffect(() => {
if (i18n.language === "ar") {
document.documentElement.dir = "rtl";
@ -89,9 +59,8 @@ const Navbar = () => {
];
return (
<nav className="bg-white/10 backdrop-blur-lg fixed top-0 w-full z-50 shadow h-14">
<nav className="navbar-theme fixed top-0 w-full z-50 shadow h-14">
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto py-2 px-4">
{/* الشعار */}
<img
src="src/assets/TPS-logo.png"
className="h-8 sm:h-10 md:h-12 transition-all duration-300"
@ -100,19 +69,20 @@ const Navbar = () => {
{/* الجانب الأيمن */}
<div className="flex items-center md:order-2 space-x-1 md:space-x-0 rtl:space-x-reverse relative">
<button
onClick={toggleDarkMode}
{/* زر تبديل الثيم */}
<button
onClick={toggleTheme}
type="button"
className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 ml-2 transition-colors duration-200"
aria-label={isDarkMode ? "Light Mode" : "Dark Mode"}
title={isDarkMode ? "Light Mode" : "Dark Mode"}
className="icon-button-theme inline-flex items-center p-2 w-10 h-10 justify-center text-sm"
aria-label={currentTheme === "dark" ? "الوضع الفاتح" : "الوضع الداكن"}
title={currentTheme === "dark" ? "الوضع الفاتح" : "الوضع الداكن"}
>
{isDarkMode ? (
<svg className="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
{currentTheme === "dark" ? (
<svg className="w-5 h-5 text-secondary" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
</svg>
) : (
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<svg className="w-5 h-5 text-primary" fill="currentColor" viewBox="0 0 20 20">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
</svg>
)}
@ -125,7 +95,7 @@ const Navbar = () => {
<button
onClick={toggleMenu}
type="button"
className="inline-flex items-center right--30 p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 ml-2"
className="icon-button-theme inline-flex items-center p-2 w-10 h-10 justify-center text-sm md:hidden"
aria-controls="navbar-menu"
aria-expanded={menuOpen}
>
@ -149,9 +119,10 @@ const Navbar = () => {
}`}
id="navbar-menu"
>
<ul className="flex flex-col md:flex-row bg-white dark:bg-gray-900 md:bg-transparent md:dark:bg-transparent p-4 md:p-0 rounded-lg shadow-md md:shadow-none space-y-2 md:space-y-0 md:space-x-6 mt-4 md:mt-0 divide-y divide-gray-200 md:divide-y-0">
<ul className="flex flex-col md:flex-row p-4 md:p-0 rounded-lg space-y-2 md:space-y-0 md:space-x-6 mt-4 md:mt-0 divide-y md:divide-y-0"
style={{ borderColor: 'var(--border-color)' }}>
{navItems.map((item) => (
<li key={item.key} className="pt-2 md:pt-0">
<li key={item.key} className="pt-2 md:pt-0 first:pt-0 md:first:pt-0">
<Link
to={item.key}
smooth
@ -159,10 +130,8 @@ const Navbar = () => {
spy={true}
offset={0}
onSetActive={() => setActiveSection(item.key)}
className={`block text-center md:inline cursor-pointer text-lg font-semibold transition duration-200 ${
activeSection === item.key
? "text-yellow-500"
: "text-gray-800 dark:text-white hover:text-yellow-500"
className={`nav-link-theme block text-center md:inline cursor-pointer text-lg px-4 py-2 rounded-lg ${
activeSection === item.key ? "nav-link-active" : ""
}`}
>
{item.label}
@ -176,4 +145,4 @@ const Navbar = () => {
);
};
export default Navbar;
export default Navbar;