Feat/implement navbar

[arxja]

Summary by CodeRabbit

Release Notes

• New Features

  • Added a navigation bar that hides on scroll down and reappears on scroll up
  • Integrated authentication state display (user avatar or login link)
  • Added navigation links for Pricing, About, and Contact pages
  • Implemented dark mode styling with animated theme transitions
  • Added accessibility support for reduced motion preferences

• Chores

  • Updated dependencies with animation libraries

[coderabbitai]

Warning

Review limit reached

@arxja, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 48 minutes and 58 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more credits in the billing tab to continue.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6ead943b-02c5-42e1-8cc7-6e193bd142a6

📥 Commits

Reviewing files that changed from the base of the PR and between a610418 and 49e1c40.

📒 Files selected for processing (3)

• components/Navbar.tsx
• lib/constants.ts
• types/types.ts

📝 Walkthrough

Walkthrough

This PR adds a scroll-aware Navbar component with animated visibility, navigation links, and conditional user authentication rendering. The navbar hides on downward scroll and re-appears on upward scroll, with GSAP animations and reduced-motion support. The PR also updates styling, adds authentication-aware UI elements, and makes the /pricing route publicly accessible.

Changes

Navigation Component and Integration

Layer / File(s)	Summary
Navigation Types and Configuration types/types.ts, lib/constants.ts	NavItemsTypes interface defines nav item shape with name and link strings; NAVBAR_ITEMS constant exports an array of three links: Pricing, About, and Contact.
Navbar Component with Scroll Animation components/Navbar.tsx, package.json	Navbar component uses scroll listeners and GSAP animations to show/hide based on scroll position and direction. Detects prefers-reduced-motion setting and renders conditional user authentication UI (avatar or Login link). Dependencies added: gsap, @gsap/react, react-use.
Navigation Styling Utilities app/globals.css	Tailwind utility classes .nav-hover-btn with animated underline and .floating-nav for translucent container styling; dark-mode variants and reduced-motion media query to disable transitions for accessibility.
Root Layout Integration app/(root)/layout.tsx, app/layout.tsx	Root layout imports and renders <Navbar /> above children; root body element adds theme classes (bg-canvas text-text-primary) and transition-theme for animated theme switching.
Public Route Access proxy.ts	/pricing path added to publicRoutes allowlist to bypass authentication checks.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• arxja/saasify#6: Introduces the core Tailwind/CSS theme tokens (bg-canvas, text-text-primary, primary colors) that this PR builds upon for nav-specific utilities like .nav-hover-btn and .floating-nav.

Poem

🐰 Whiskers twitch with nav delight,
Scroll-aware, fading out of sight,
GSAP swirls the buttons 'round,
Pricing paths now public-bound,
Auth checks dance in harmony,
A navbar flows so gracefully! 🎨✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'Feat/implement navbar' directly and clearly describes the main change: implementing a new navbar component with related styling, layout updates, and configuration changes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/implement-navbar

---

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: 2

🧹 Nitpick comments (1)

package.json (1)

21-21: Remove unused @gsap/react dependency.

    "`@gsap/react`": "^2.1.2",

@gsap/react is only referenced in pnpm-lock.yaml; no source files import/use it (including components/Navbar.tsx, which imports gsap directly). Remove it from package.json (and update the lockfile) to reduce bundle/dependency overhead.

🤖 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 `@package.json` at line 21, Remove the unused dependency entry "`@gsap/react`":
"^2.1.2" from package.json and run the package manager to update the lockfile
(e.g., pnpm install or pnpm update) so pnpm-lock.yaml no longer contains it;
ensure no source files import "`@gsap/react`" (components like Navbar.tsx import
"gsap" directly) and commit the updated package.json and regenerated lockfile.

🤖 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 `@components/Navbar.tsx`:
- Around line 99-104: The Link component rendering the "Login" button currently
points to "/sign-up"; update its href prop in components/Navbar.tsx so the Login
button routes to "/sign-in" (i.e., change the Link href from "/sign-up" to
"/sign-in"), leaving the label and styling unchanged.

In `@types/types.ts`:
- Around line 1-4: Export the NavItemsTypes interface and add the missing type
import so the cross-file contract is explicit: in types/types.ts (lines 1-4)
change the interface declaration to export the interface NavItemsTypes so it can
be consumed externally; in lib/constants.ts (lines 105-118) add an import type {
NavItemsTypes } from "`@/types/types`"; at the top of the file so the file
references the exported type rather than an undeclared identifier.

---

Nitpick comments:
In `@package.json`:
- Line 21: Remove the unused dependency entry "`@gsap/react`": "^2.1.2" from
package.json and run the package manager to update the lockfile (e.g., pnpm
install or pnpm update) so pnpm-lock.yaml no longer contains it; ensure no
source files import "`@gsap/react`" (components like Navbar.tsx import "gsap"
directly) and commit the updated package.json and regenerated lockfile.

🪄 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

Run ID: 7b32a385-e84c-4fd4-9376-2d9d37ee3052

📥 Commits

Reviewing files that changed from the base of the PR and between 6868792 and a610418.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (9)

• app/(root)/layout.tsx
• app/(root)/page.tsx
• app/globals.css
• app/layout.tsx
• components/Navbar.tsx
• lib/constants.ts
• package.json
• proxy.ts
• types/types.ts