spestexnika/components/nav_foot/navbar.tsx

// src/components/nav_foot/navbar.tsx
"use client";

import { useEffect, useState } from "react";
import { animateScroll as scroll } from "react-scroll";
import Text from "../lib_components/text";
import "./navbar.css";
import { logoImg } from "@/assets";
import Image from "next/image";
import { X } from "lucide-react";
import { useLocale } from "next-intl";
import { useRouter, usePathname } from "@/i18n/navigation";

export default function Navbar() {
  const router = useRouter();
  const pathname = usePathname();
  const locale = useLocale();

  const [toggle, setToggle] = useState(false);
  const [togglerIcon, setTogglerIcon] = useState("toggler");

  const handleChangeLang = (lng: "uz" | "ru") => {
    router.replace(pathname, { locale: lng });
  };

  const changeToggler = () => {
    setToggle(!toggle);
    togglerIcon === "toggler"
      ? setTogglerIcon("toggler toggle")
      : setTogglerIcon("toggler");
  };

  const scrollOrRoute = (id: string) => {
    if (pathname !== "/") {
      router.push(`/#${id}`);
    } else {
      scroll.scrollTo(document.getElementById(id)!.offsetTop - 100);
    }
    changeToggler();
  };

  const goHome = () => {
    router.push("/");
  };

  useEffect(() => {
    if (toggle) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "auto";
    }
  }, [toggle]);

  return (
    <>
      {toggle && (
        <div
          onClick={changeToggler}
          className="fixed inset-0 bg-black/30 bg-opacity-50 z-[900]"
        ></div>
      )}
      <div className="w-full bg-white border-gray shadow-md shadow-gray-500 z-[1000] top-0 ">
        <div className="container max-w-[1500px] w-full px-[10px] mx-auto flex justify-between items-center">
          <div className="flex items-center gap-5">
            <button
              onClick={() => handleChangeLang("uz")}
              className={`hover:cursor-pointer ${
                locale === "uz" && "bg-secondary text-primary rounded-[8px]"
              } px-2 py-1 text-[20px] ${
                locale !== "uz" && "border-l-2 border-b-2 border-primary"
              } `}
            >
              UZ
            </button>
            <button
              onClick={() => handleChangeLang("ru")}
              className={`hover:cursor-pointer ${
                locale === "ru" && "bg-secondary text-primary rounded-[8px]"
              } px-2 py-1 text-[20px]  ${
                locale !== "ru" && "border-r-2 border-b-2 border-primary"
              }`}
            >
              RU
            </button>
          </div>

          <div className="flex items-center gap-5">
            <div className="nav_link_group hidden min-[540px]:flex gap-5">
              <LinkButton
                txt="products"
                id="products"
                scrollFunc={scrollOrRoute}
              />
              <LinkButton txt="news" id="about" scrollFunc={scrollOrRoute} />
              <LinkButton
                txt="contact"
                id="contact"
                scrollFunc={scrollOrRoute}
              />
            </div>

            <div onClick={changeToggler} className={togglerIcon}>
              <div className="toggle_item1"></div>
              <div className="toggle_item2"></div>
              <div className="toggle_item3"></div>
            </div>

            <div
              className={
                toggle ? "nav_link_group_phone active" : "nav_link_group_phone"
              }
            >
              <div className="flex flex-col gap-5 items-end justify-start w-full px-5">
                <button
                  onClick={changeToggler}
                  className="w-full text-right text-gray-600 hover:text-primary"
                >
                  <X size={22} />
                </button>
                <LinkButton
                  txt="products"
                  id="products"
                  scrollFunc={scrollOrRoute}
                />
                <LinkButton txt="news" id="about" scrollFunc={scrollOrRoute} />
                <LinkButton
                  txt="contact"
                  id="contact"
                  scrollFunc={scrollOrRoute}
                />
              </div>
            </div>
          </div>

          <div
            onClick={goHome}
            className="flex items-center gap-2 cursor-pointer"
          >
            <span className="flex max-[770px]:hidden text-2xl font-bold">
              SPES-TEXNIKA
            </span>
            <Image src={logoImg} alt="logo" width={100} height={100} priority />
          </div>
        </div>
      </div>
    </>
  );
}

function LinkButton({
  txt,
  id,
  scrollFunc,
}: {
  txt: string;
  id: string;
  scrollFunc: (id: string) => void;
}) {
  return (
    <button
      onClick={() => scrollFunc(id)}
      className="text-primary hover:text-secondary text-[20px]"
    >
      <Text txt={txt} />
    </button>
  );
}