Untitled
unknown
javascript
2 years ago
3.8 kB
4
Indexable
// 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>
Editor is loading...