Properly hide Navbar when it's not visible

[praveenzsp]

Fixes #152

This PR focus on properly hiding the navbar and nav links when it is not shown.
Earlier when the navbar is hidden, all its nav links are still clickable which is not supposed to happen.

With this PR, navbar is properly hidden and all nav links also disappear properly for better UX.

Before - Nav links still clickable

before.mp4

After - Navbar is hidden completely

after.mp4

Summary by CodeRabbit

• Bug Fixes
  • Improved navbar visibility handling to fully hide the navigation bar when inactive, ensuring complete visual removal.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

@praveenzsp 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.

[coderabbitai]

Walkthrough

The navbar component's animation now includes display: 'none' when hidden, preventing interaction with invisible navbar elements. This addresses the issue where the navbar remained clickable despite being visually hidden.

Changes

Cohort / File(s)	Change Summary
Navbar animation fix apps/web/src/components/landing-sections/navbar.tsx	Updated animate prop to include display: 'none' when showNavbar is false, preventing pointer events on hidden navbar elements

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 A navbar that vanished but still caught the click,
Now truly invisible—no trick!
With display: 'none' applied with care,
The hidden links float through thin air. ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes address issue #152 by adding display: 'none' to the navbar's animate prop when hidden, preventing clicks on hidden navbar links.
Out of Scope Changes check	✅ Passed	The only substantive change is to navbar.tsx's animate prop to add display: 'none'. The layout.tsx changes are minor formatting (import reordering, tag spacing) and unrelated to the core fix.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding display: 'none' to properly hide the Navbar component when not visible, addressing the bug where hidden navbar links remained clickable.

✨ 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.}

[cla-assistant]

All committers have signed the CLA.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

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

15-15: Optional: Simplify boolean initialization.

The ternary isPricingPage ? true : false can be simplified to just isPricingPage since it's already a boolean value.

Apply this diff:

-  const [showNavbar, setShowNavbar] = useState(isPricingPage ? true : false);
+  const [showNavbar, setShowNavbar] = useState(isPricingPage);

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d424df8 and 683d365.

📒 Files selected for processing (2)

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

💤 Files with no reviewable changes (1)

• apps/web/src/app/(main)/(landing)/layout.tsx

🔇 Additional comments (3)

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

49-49: The display: 'none' addition correctly prevents interaction when hidden.

Assuming the Navbar component is still being rendered somewhere in the application, adding display: 'none' alongside opacity: 0 is the correct approach to fix the clickability issue. Framer Motion will apply display: 'none' after the opacity transition completes, ensuring the fade animation still works while preventing any interaction when hidden.

---

113-141: Verify mobile menu accessibility when navbar is hidden.

When showNavbar is false, the entire navbar including the mobile menu will have display: 'none' applied. This means users on non-pricing pages who are scrolled to the top (where scrollYProgress === 0) cannot access the mobile menu at all.

Please verify this is the intended behavior, especially for mobile users who may need navigation access regardless of scroll position.

---

49-49: The review comment is based on an incorrect premise and should be dismissed.

The verification confirms that the Navbar component is still actively being used in the codebase—specifically, it's imported and rendered in apps/web/src/app/(main)/(landing)/page.tsx (lines 8 and 18). The AI summary claiming that the Navbar was "removed from layout rendering" is inaccurate.

Since the Navbar is still being rendered, the change to add display: 'none' on line 49 is necessary and appropriate. This enhancement ensures that when showNavbar is false (based on scroll position), the navbar becomes truly invisible and non-interactive, not just optically hidden. Combining opacity: 0 with display: 'none' is a best practice for animation libraries like Framer Motion.

Likely an incorrect or invalid review comment.

[praveenzsp]

Hey @apsinghdev, this makes my first ever open source contribution, though small it feels good to get into OS through Opensox. Appreciate your work and efforts.

[apsinghdev]

@praveenzsp thanks for your contributions! im just occupied with some personal stuff and will review this very soon! 🙏

[praveenzsp]

@praveenzsp thanks for your contributions! im just occupied with some personal stuff and will review this very soon! 🙏

Sure, take your time

[huamanraj]

@apsinghdev good to merge

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
opensox-website	Ready	Preview	Comment	Nov 29, 2025 1:08pm

[apsinghdev]

@praveenzsp nice work! 🔥