fix: prevent hidden navbar clicks using pointer-events

[purubhoite]

Fixed issue #152 by adding pointerEvents: "none" to the navbar when it is hidden.

Summary by CodeRabbit

• Bug Fixes
  • Navbar no longer intercepts clicks when hidden, preventing it from blocking other page interactions.
• Accessibility
  • Hidden navbar is now exposed as hidden to assistive technologies, improving navigation and screen reader behavior.

[vercel]

@purubhoite is attempting to deploy a commit to the AJEET PRATAP SINGH's projects Team on Vercel.

A member of the Team first needs to authorize it.

[cla-assistant]

All committers have signed the CLA.

[coderabbitai]

Walkthrough

Navbar animation states were extended to include pointerEvents and aria-hidden handling: hidden state sets pointerEvents: "none" and visible state sets pointerEvents: "auto", in addition to the existing opacity transitions.

Changes

Cohort / File(s)	Summary
Navbar Animation Enhancement apps/web/src/components/landing-sections/navbar.tsx	Added pointerEvents to animation states and aria-hidden handling: initial/hidden use pointerEvents: "none" (and opacity: 0), visible uses pointerEvents: "auto" (and opacity: 1) to disable interactions when not shown.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant Navbar
  Note over Navbar: Animation states include opacity + pointerEvents
  User->>Navbar: trigger show
  activate Navbar
  Navbar-->>User: animate to opacity:1, pointerEvents:auto (aria-hidden=false)
  deactivate Navbar
  User->>Navbar: trigger hide
  activate Navbar
  Navbar-->>User: animate to opacity:0, pointerEvents:none (aria-hidden=true)
  deactivate Navbar

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Single-file, localized change with low logic density
• Review attention: verify accessibility attribute (aria-hidden) alignment with pointerEvents and animation timing

Poem

I hop along the navbar's trail,
It fades, then returns without a flail.
Clicks are paused when out of sight,
Then come alive in morning light. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding pointer-events to prevent clicks on the hidden navbar, which directly matches the changeset's primary objective.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 97e699a and 0b1a297.

📒 Files selected for processing (1)

• apps/web/src/components/landing-sections/navbar.tsx (1 hunks)

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/web/src/components/landing-sections/navbar.tsx (1)

48-50: Excellent implementation addressing both pointer interaction and accessibility!

The addition of pointerEvents control and aria-hidden={!showNavbar} correctly addresses the original issue and the keyboard accessibility concern raised in the previous review. When the navbar is hidden:

• pointerEvents: "none" prevents mouse/touch clicks
• aria-hidden={true} hides it from screen readers

The implementation is syntactically correct and represents a clear improvement.

---

Optional enhancement: For even more robust keyboard navigation blocking, consider adding the inert attribute alongside aria-hidden:

     <motion.nav
       initial={{ opacity: 0, pointerEvents: "none" }}
       animate={showNavbar ? { opacity: 1, pointerEvents: "auto" } : { opacity: 0, pointerEvents: "none" }}
       aria-hidden={!showNavbar}
+      inert={!showNavbar ? "" : undefined}
       transition={{ duration: 0.3 }}

The inert attribute comprehensively removes the element from user interaction (including Tab navigation) in modern browsers, though aria-hidden is sufficient for most cases.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0b1a297 and f742094.

📒 Files selected for processing (1)

• apps/web/src/components/landing-sections/navbar.tsx (1 hunks)