feat: add active navigation highlight

[nishupr]

Fix #338

Summary

Added active state highlighting to the navigation bar to visually indicate the current page/section the user is on.

Changes

• Updated LandingNavbar.jsx to track and apply active state to nav links
• Updated Navbar.css with styles for the active navigation highlight

Screenshots

Summary by CodeRabbit

• New Features

  • Navigation now detects which landing section is most visible while scrolling and highlights the corresponding link, improving orientation and ease of navigation.

• Style

  • Active navigation links use an accent text color and a 2px accent underline to clearly indicate the current section, providing consistent visual feedback during scrolling.

[vercel]

Someone is attempting to deploy a commit to the firefistisdead's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 188c61b9-fbfe-40ae-8cba-fa970c3bece0

📥 Commits

Reviewing files that changed from the base of the PR and between e263207 and 6a1632d.

📒 Files selected for processing (1)

• frontend/src/components/Landing/Navbar.css

---

📝 Walkthrough

Walkthrough

LandingNavbar now tracks which landing-page section is in view using an IntersectionObserver, stores the most-visible section in activeSection, and conditionally applies an active CSS class to navbar links which receive accent-color text and a bottom border.

Changes

Landing Navbar Active Section Highlighting

Layer / File(s)	Summary
Observer setup and active section state frontend/src/components/Landing/LandingNavbar.jsx	Added activeSection state and a useEffect that creates an IntersectionObserver (threshold 0.4) observing features, how-it-works, pricing, and faq elements; updates activeSection to the most visible intersecting entry and disconnects the observer on cleanup.
Active link rendering and CSS styling frontend/src/components/Landing/LandingNavbar.jsx, frontend/src/components/Landing/Navbar.css	Center navbar links now conditionally apply active when their section id equals activeSection; added .navbar-link.active (text color #C8F135 and border-bottom: 2px solid #C8F135``) to indicate the active link.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• FireFistisDead/pdf-qa-bot#168: Introduced the redesigned landing navbar and styles that this change extends with active-section tracking and .navbar-link.active styling.
• FireFistisDead/pdf-qa-bot#203: Previously adjusted the FAQ center navigation; related because this PR observes #faq and highlights that link.

Suggested labels

level:intermediate, quality:clean, type:design

Suggested reviewers

• FireFistisDead

Poem

🐰 I hopped along the landing page so spry,
watching sections scroll as they glide by.
Now links glow bright with a hop and a wink,
the navbar knows where you pause to think.
Cheerful highlights — trail my carrot 🥕 light!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main feature added: active navigation highlighting for the navbar.
Description check	✅ Passed	The description includes a summary, linked issue reference, changes overview, and screenshots. While testing and security checklist items are not explicitly checked, the core required information is present.
Linked Issues check	✅ Passed	The PR successfully implements issue #338 by using IntersectionObserver API to track active sections and highlight corresponding navbar links with active styling.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to implementing the active navigation highlight feature. No unrelated modifications detected in the two altered files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

frontend/src/components/Landing/LandingNavbar.jsx (1)

57-60: ⚡ Quick win

Add semantic active-state for screen readers.

Set aria-current="page" on the active nav link so assistive tech gets the same active context as visual users.

Small accessibility improvement

-<a href="`#features`" className={`navbar-link ${activeSection === 'features' ? 'active' : ''}`}>Features</a>
+<a
+  href="`#features`"
+  className={`navbar-link ${activeSection === 'features' ? 'active' : ''}`}
+  aria-current={activeSection === 'features' ? 'page' : undefined}
+>
+  Features
+</a>

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/components/Landing/LandingNavbar.jsx` around lines 57 - 60, In
LandingNavbar.jsx update the anchor elements that use activeSection (the four
<a> links with className `navbar-link`) to include aria-current="page" only when
that link is active (e.g., when activeSection === 'features' for the Features
link); ensure the attribute is present on the active link and absent on
non-active links so screen readers receive the same active-state as visual
users.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/components/Landing/LandingNavbar.jsx`:
- Around line 25-40: The current useEffect in LandingNavbar.jsx creates one
IntersectionObserver per section which can yield nondeterministic active-section
updates; instead create a single IntersectionObserver that observes all elements
in the sections array inside useEffect and in its callback deterministically
pick the winning entry (e.g., choose the entry with highest intersectionRatio,
breaking ties by largest IntersectionObserverEntry.time or explicit geometry
rule) and call setActiveSection with that entry.target.id; ensure you observe
each element with that single observer and retain the existing cleanup by
disconnecting the single observer on unmount.

In `@frontend/src/components/Landing/Navbar.css`:
- Around line 170-173: Remove the border-bottom from .navbar-link.active and
instead toggle the existing pseudo-element underline (.navbar-link::after) for
the active state; update .navbar-link.active to set the ::after variant (for
example by changing its opacity/transform/height or adding an active class
selector like .navbar-link.active::after) so the same underline pseudo-element
is used with the same transitions, and ensure .navbar-link.active no longer
applies border-bottom to avoid layout jitter.

---

Nitpick comments:
In `@frontend/src/components/Landing/LandingNavbar.jsx`:
- Around line 57-60: In LandingNavbar.jsx update the anchor elements that use
activeSection (the four <a> links with className `navbar-link`) to include
aria-current="page" only when that link is active (e.g., when activeSection ===
'features' for the Features link); ensure the attribute is present on the active
link and absent on non-active links so screen readers receive the same
active-state as visual users.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 5243de97-ec39-4b15-b16a-933340756c23

📥 Commits

Reviewing files that changed from the base of the PR and between 055d3af and 1d96d0e.

📒 Files selected for processing (2)

• frontend/src/components/Landing/LandingNavbar.jsx
• frontend/src/components/Landing/Navbar.css