REXNT/src/Components/Nav/Navbar.jsx

import React, { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-scroll";
import LanguageSwitcher from "../LanguageSwitcher/LanguageSwitcher";
import "../../index.css";

const Navbar = () => {
  const { t, i18n } = useTranslation();
  const [menuOpen, setMenuOpen] = useState(false);
  const [activeSection, setActiveSection] = useState("home");

  const toggleMenu = () => {
    setMenuOpen(!menuOpen);
  };

  // Handle scroll to update active section
  useEffect(() => {
    const handleScroll = () => {
      const sections = ["home", "services", "about", "contact"];
      const scrollPosition = window.scrollY + 100;

      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;
          }
        }
      }
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  // Update document direction when language changes
  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") },
    { key: "services", label: t("nav.services") },
    { key: "about", label: t("nav.about") },
    { key: "contact", label: t("nav.contact") },
  ];

  return (
    <nav className="bg-white/10 backdrop-blur-lg 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"
          alt="TPS Logo"
        />

        {/* الجانب الأيمن */}
        <div className="flex items-center md:order-2 space-x-1 md:space-x-0 rtl:space-x-reverse relative">
          {/* Language Switcher */}
          <LanguageSwitcher />

          {/* زر القائمة للجوال */}
          <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"
            aria-controls="navbar-menu"
            aria-expanded={menuOpen}
          >
            <span className="sr-only">Open main menu</span>
            <svg className="w-5 h-5" viewBox="0 0 17 14" fill="none">
              <path
                d="M1 1h15M1 7h15M1 13h15"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </button>
        </div>

        {/* روابط الأقسام */}
        <div
          className={`w-full md:flex md:w-auto md:order-1 transition-all duration-300 ease-in-out ${
            menuOpen ? "block" : "hidden"
          }`}
          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">
            {navItems.map((item) => (
              <li key={item.key} className="pt-2 md:pt-0">
                <Link
                  to={item.key}
                  smooth
                  duration={500}
                  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"
                  }`}
                >
                  {item.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;