bpms_site/app/components/navbar/index.js

import Link from "next/link";
import Image from "next/image";
import logo from "../../../public/assets/photos/logo.svg";
import styles from "./header.module.css";
import { useEffect, useRef, useState } from "react";
import Document from "next/document";

const header = ({ backwardStatus, setbackwardStatus, data }) => {
  const [menuOpen, setMenuOpen] = useState(false);

  // برای show/Hide backward
  const toggleMenu = () => {
    setMenuOpen(!menuOpen);
    setbackwardStatus(!menuOpen);
  };

  // برای arrow قسمت navBar
  const navSelect = (e) => {
    const selectNav = document.querySelector(".selectNav");
    selectNav.classList.remove(selectNav.classList[1]); // حذف همه کلاس‌ها

    const element = e.classList[0];
    selectNav.classList.add(element);

    // تابع اسکرول را به داخل تابع navSelect انتقال دهید
    const pageScroll = (number) => {
      window.scrollTo({
        top: number,
        behavior: "smooth",
      });
    };

    switch (element) {
      case "main":
        pageScroll(0);
        break;
      case "services":
        pageScroll(610);
        break;
      case "customers":
        pageScroll(1750);
        break;
      case "aboutUs":
        pageScroll(2170);
        break;
    }
  };

  const [scrollPosition, setScrollPosition] = useState(0);
  const scrollPositionRef = useRef(0); // ایجاد وضعیت مکمل

  useEffect(() => {
    const handleScroll = () => {
      const newScrollPosition = Math.round(window.scrollY);
      scrollPositionRef.current = newScrollPosition; // به روزرسانی وضعیت مکمل
      setScrollPosition(newScrollPosition);
    };

    window.addEventListener("wheel", handleScroll);

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

  useEffect(() => {
    const selectNav = document.querySelector(".selectNav");
    // selectNav?.classList.remove(selectNav?.classList[1]);
    if (scrollPosition >= 0 && scrollPosition <= 100) {
      selectNav.classList.add("main");
      selectNav.classList.remove("services", "customers", "aboutUs");
    }
    if (scrollPosition >= 500 && scrollPosition <= 1000) {
      selectNav.classList.add("services");
      selectNav.classList.remove("main", "customers", "aboutUs");
    }
    if (scrollPosition >= 1300 && scrollPosition <= 1600) {
      selectNav.classList.add("customers");
      selectNav.classList.remove("main", "services", "aboutUs");
    }
    if (scrollPosition >= 1610 && scrollPosition <= 2200) {
      selectNav.classList.add("aboutUs");
      selectNav.classList.remove("main", "services", "customers");
    }
  }, [scrollPosition]);

  return (
    <>
      <div className={styles.header}>
        <div className={`toggleMenu ${menuOpen ? "open" : ""}`}>
          <span
            className="openToggle icon menuIcon"
            onClick={toggleMenu}
          ></span>
          <div className={`toggleSlider ${menuOpen ? "open" : ""}`}>
            <span className="closeToggle icon closeIcon" onClick={toggleMenu}>
              منو
            </span>
            <div className="toggleContent">
              <span>صفحه اصلی</span>
              <span>خدمات ما</span>
              <span>مشتریان ما</span>
              <span>درباره ما</span>
            </div>
          </div>
          <div>
            <div className={styles.logo}>
              <Image src={logo} alt="logo" width="100px" height="100px" />
            </div>
          </div>
        </div>
        <div className="container">
          <div className={styles.parent}>
            <div className={styles.content}>
              <span className="main" onClick={(e) => navSelect(e.target)}>
                صفحه اصلی
              </span>
              <span className="services" onClick={(e) => navSelect(e.target)}>
                خدمات ما
              </span>
              <span className="customers" onClick={(e) => navSelect(e.target)}>
                مشتریان ما
              </span>
              <span className="aboutUs" onClick={(e) => navSelect(e.target)}>
                درباره ما
              </span>
              <h5 className="selectNav"></h5>
            </div>
            <div className={styles.logoContent}>
              <div className={styles.logo}>
                <Image src={logo} alt="logo" width="100px" height="100px" />
              </div>
              <div className={styles.logoTxt}>
                <h1>{data?.company_name}</h1>
                <h1>{data?.company_latin_name}</h1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default header;