web/components/landingComponents/Navbar.jsx

"use client";
import React, { useEffect, useState } from "react";

import { menu, close } from "src/assets";
import { styles } from "src/style";
import logo2 from "../../src/assets/logo2.png";
import Image from "next/image";
import { useLocale, useTranslations } from "next-intl";
import PersianNumberMemo from "plugins/PersianNumber";
import { Link, routing } from "../../src/i18n/routing";
import { useRouter } from "next/navigation";

// Fix the `useTranslations` key (removed space at the end)
const navLinks = () => {
  const t = useTranslations("navLinks");
  return [
    {
      id: "our-solution",
      title: t("ourSolution"),
      go: false,
    },
    {
      id: "product",
      title: t("product"),
      go: false,
    },
    {
      id: "pricing",
      title: t("pricing"),
      go: true,
    },
    {
      id: "about-us",
      title: t("aboutUs"),
      go: true,
    },
  ];
};

const Navbar = () => {
  const [active, setActive] = useState("");
  const [toggle, setToggle] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [isOpenLang, setIsOpenLang] = useState(false); // To toggle the dropdown

  const t = useTranslations("navLinks");

  const locale = useLocale();
  const router = useRouter();

  const isRTL = locale === "fa";

  // Call `navLinks` once at the beginning
  const navItems = navLinks();

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.scrollY;
      if (scrollTop > 100) {
        setScrolled(true);
      } else {
        setScrolled(false);
      }
    };

    window.addEventListener("scroll", handleScroll);

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

  const availableLocales = [
    { code: "en", name: "en" },
    { code: "fa", name: "فا" }, // Persian (RTL)
    { code: "zh", name: "中文" },
  ];

  // Function to change the locale
  const changeLocale = (newLocale) => {
    // Navigate to the same route but with a different locale
    router.push(`/${newLocale}`);
    setIsOpenLang(false); // Close the dropdown
  };

  return (
    <nav
      className={`sm:px-16 px-6 w-full flex items-center py-5 fixed top-0 z-20 tr03 ${
        scrolled ? "bg-black" : "bg-transparent"
      }`}
    >
      <div
        className={`w-full flex justify-between items-center max-w-7xl mx-auto ${
          isRTL ? "rtl" : "ltr"
        }`}
      >
        <div className="flex">
          <Link
            href="/"
            className="flex items-center gap-2"
            onClick={() => {
              setActive("");
              window.scrollTo(0, 0);
            }}
          >
            <Image
              src={logo2}
              alt="ldsdogo"
              className="w-[120px] object-contain "
            />{" "}
          </Link>
          <ul className="flex-row hidden gap-10 p-3 mx-10 list-none sm:flex">
            {navItems.map((nav) => (
              <li
                key={nav.id}
                className={`${
                  active === nav.title ? "text-white" : "text-white"
                } hover:text-gray-400 text-[19px] font-medium cursor-pointer tr03`}
                onClick={() => setActive(nav.title)}
              >
                <>
                  {nav.go ? (
                    <Link href={`/${nav.id}`}>{nav.title}</Link>
                  ) : (
                    <Link href={`/#${nav.id}`}>{nav.title}</Link>
                  )}
                </>
              </li>
            ))}
          </ul>
        </div>

        <div className="flex">
          <Link href="/app/login">
            <button className="px-10 py-2 text-sm rounded-full btn btn-primary xs:hidden lg:block">
              {t("button")}{" "}
            </button>
          </Link>

          <div className="relative">
            {/* Language button */}
            <div
              className="flex items-center justify-center mx-2 rounded-full cursor-pointer w-9 h-9 bg-primary-300"
              onClick={() => setIsOpenLang(!isOpenLang)}
            >
              <p className="mb-0 text-sm">
                {isRTL ? "فا" : locale == "zh" ? "中文" : locale}
              </p>
            </div>

            {/* Dropdown box for language selection */}

            {isOpenLang && (
              <div className="absolute mx-2 mt-2 bg-white rounded-full shadow-lg w-9 ">
                {availableLocales.map((lang) => (
                  <button
                    key={lang.code}
                    onClick={() => changeLocale(lang.code)}
                    className={`block py-2 text-sm  text-center w-full relative ${
                      locale === lang.code ? "font-bold" : ""
                    }`}
                  >
                    {lang.name}
                  </button>
                ))}
              </div>
            )}
          </div>
        </div>

        <div className="flex items-center justify-end flex-1 sm:hidden">
          <Image
            src={toggle ? close : menu}
            alt="menu"
            className="w-[18px] h-[28px] object-contain"
            onClick={() => setToggle(!toggle)}
          />

          <div
            className={`${
              !toggle ? "hidden" : "flex"
            } p-6 bg-white absolute top-20 right-5 my-2 min-w-[140px] z-10 rounded-xl`}
          >
            <ul className="flex flex-col items-start justify-end flex-1 gap-4 list-none">
              {navItems.map((nav) => (
                <li
                  key={nav.id}
                  className={`font-poppins font-medium cursor-pointer text-[16px] ${
                    active === nav.title ? "text-white" : "text-secondary"
                  }`}
                  onClick={() => {
                    setToggle(!toggle);
                    setActive(nav.title);
                  }}
                >
                  <>
                    {nav.go ? (
                      <Link href={`/${nav.id}`}>{nav.title}</Link>
                    ) : (
                      <Link href={`/#${nav.id}`}>{nav.title}</Link>
                    )}
                  </>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;