Untitled

// 1 - ===> اینجا در واقع یه سری رفرس تعریف کردم و دادم به المنت هام و اونی که اسکرول میشه و میرسه بهش رو میریزم توی اتمی که توی ریکویل گذاشتم

 //* detect nav-links-id in viewport and actived navLink (for footer [mobile bottom nav-links] and [desktop top-header-nav-links] ) for add to global state
  // mockup section
  const mockupsSectionRef = useRef<HTMLDivElement | null>(null);
  const mockupsSectionEntry = useInViewportDetect(mockupsSectionRef, {});
  const mockupsSectionInViewportDetect = !!mockupsSectionEntry?.isIntersecting;
  // ui-kits section
  const uikitsSectionRef = useRef<HTMLDivElement | null>(null);
  const uikitsSectionEntry = useInViewportDetect(uikitsSectionRef, {});
  const uikitsSectionInViewportDetect = !!uikitsSectionEntry?.isIntersecting;
  // illustration section
  const illustrationsSectionRef = useRef<HTMLDivElement | null>(null);
  const illustrationsSectionEntry = useInViewportDetect(
    illustrationsSectionRef,
    {},
  );
  const illustrationsSectionInViewportDetect =
    !!illustrationsSectionEntry?.isIntersecting;

  //* add activedNavItem to globalState
  const setRecoilActivedNavLink = useSetRecoilState<
    null | 'mockups' | 'ui-kits' | 'illustrations'
  >(atomActivedNavLinkInViewPort);

  useEffect(() => {
    console.log(`mockupsSection: ${mockupsSectionInViewportDetect}, uikitsSection: ${mockupsSectionInViewportDetect}, illustrationSection: ${illustrationsSectionInViewportDetect}`);
    if (mockupsSectionInViewportDetect) {
      setRecoilActivedNavLink('mockups');
    } else if (uikitsSectionInViewportDetect) {
      setRecoilActivedNavLink('ui-kits');
    } else if (illustrationsSectionInViewportDetect) {
      setRecoilActivedNavLink('illustrations');
    } else {
      setRecoilActivedNavLink(null);
      console.log('is null !');
    }
  }, [
    mockupsSectionInViewportDetect,
    uikitsSectionInViewportDetect,
    illustrationsSectionInViewportDetect,
  ]);

// 2 - ===> اتمی که توی ریکویل گذاشتم

const { atom } = require('recoil');

const atomActivedNavLinkInViewPort = atom({
  key: 'detectMockupsSectionInViewport',
  default: '',
});

export { atomActivedNavLinkInViewPort };

// 3 - ===> توی نو-بار موبایل میاد ری-کویل رو چک میکنم بهم میگه الان کدوم المان توی ویو پورت هست و من اکتیوش میکنم

//* active navMenu bottom button
const activedNavLink = useRecoilValue(atomActivedNavLinkInViewPort);

<nav>
<ul className="text-white text-[17px] flex justify-between items-center w-full bg-black/70 backdrop-blur-[6px] rounded-full p-3">
  <li>
    <Link href="#mockups">
      <button
        className={`transition-all duration-500 px-4 py-3 rounded-full ${
          activedNavLink === 'mockups'
            ? 'bg-[#606060]/70'
            : 'bg-transparent'
        }`}
      >
        Mockups
      </button>
    </Link>
  </li>
  <li>
    <Link href="#uikits">
      <button
        className={`transition-all duration-500 px-4 py-3 rounded-full ${
          activedNavLink === 'ui-kits'
            ? 'bg-[#606060]/70'
            : 'bg-transparent'
        }`}
      >
        UI Kits
      </button>
    </Link>
  </li>
  <li>
    <Link href="#illustrations">
      <button
        className={`transition-all duration-500 bg-[#606060]/70 px-4 py-3 rounded-full ${
          activedNavLink === 'illustrations'
            ? 'bg-[#606060]/70'
            : 'bg-transparent'
        }`}
      >
        Illustrations
      </button>
    </Link>
  </li>
</ul>
</nav>