Fix: Correctly highlight active navigation link on scroll #44
Conversation
The previous implementation had a logic flaw where the active navigation link would not be cleared correctly when scrolling between sections. This was because the `setActive` function was only called when a section was in view, but it was not cleared when no section was active. This commit refactors the scroll event handler in `Navbar.tsx` to correctly identify the active section and clear the highlighting if no section is active, regardless of the scroll position. This ensures that the active link is always correctly highlighted.
|
|
@google-labs-jules[bot] is attempting to deploy a commit to the ladunjexa's team Team on Vercel. A member of the Team first needs to authorize it. |
|
hii😁 |
There was a problem hiding this comment.
Hi @black-hat-star00 ,
just reviewed your commit, and it looks good. but there is a much cleaner and efficient way to handle navbar highlighting logic than using the getBoundingClientRect, and this magic done by the IntersectionObserver API.
It's all about using a single useEffect (mount effect, empty deps) to create the new observer, iterate over the observed entries and check entry.isIntersecting to determine which section is currently visible, and maintain current using a single state to store the active session, instead of using * 0.2, you can use the threshold which represents the % of visibility to trigger the callback - and that's it; simply select elements (queryselector) and call observe on each of them, don't forget to cleanup by unobserving them.
Anyway If you prefer not to make this change, it's totally fine since it's an improvement over the existence - just remove the unnecessary files (the test folder you've committed), and I'll merge it as is. Thanks for your contribution 👍
2 participants
The previous implementation had a logic flaw where the active navigation link would not be cleared correctly when scrolling between sections. This was because the
setActivefunction was only called when a section was in view, but it was not cleared when no section was active.This commit refactors the scroll event handler in
Navbar.tsxto correctly identify the active section and clear the highlighting if no section is active, regardless of the scroll position. This ensures that the active link is always correctly highlighted.