Add Navbar component with back and call-to-action links

[dhruv14122004]

Imporve the Navbar as it was looking very big and awkward #57

Summary by CodeRabbit

• Refactor
  • Unified navigation experience across the application with a consistent, responsive navigation bar. Features optional back navigation, centered branding, and customizable call-to-action buttons throughout all pages for improved consistency.

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

[coderabbitai]

Walkthrough

A new reusable Navbar component is introduced and integrated across three pages (home, blog post, and submit) to centralize navigation UI and replace custom header implementations previously duplicated across these routes.

Changes

Cohort / File(s)	Summary
New Navbar Component components/navbar.tsx	Created a new sticky navigation bar component with optional back button, centered branding, right-aligned navigation menu (Home/Submit links), and configurable CTA button. Supports backHref, backLabel, ctaHref, and ctaLabel props with sensible defaults.
Pages Migrated to Navbar app/page.tsx, app/a/[slug]/BlogPostClient.tsx, app/submit/page.tsx	Replaced custom header markup with <Navbar> component invocations, removing ArrowLeft icons and Link components. Each page now uses the centralized Navbar with appropriate backHref and backLabel props where applicable.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• Verify Navbar component props are correctly typed and default values are sensible
• Confirm all three page implementations pass consistent backHref="/" and backLabel="Back home" values
• Ensure responsive behavior and Tailwind styling render correctly across breakpoints
• Check that the centered brand section and CTA button defaults work as intended for each page context

Suggested reviewers

• ceilican

Poem

🐰 A nav bar hops into place,
Tidy and neat, with grace!
Three pages now share its embrace,
No more scattered headers, just one space,
Buttons aligned, components retrace.

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 accurately describes the main change: adding a reusable Navbar component with back navigation and CTA button functionality, which is the primary focus across all modified files.
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

🧹 Nitpick comments (2)

components/navbar.tsx (2)

6-11: Allow consumers to disable the CTA (current defaults force it on).
Right now, omitting ctaHref/ctaLabel still renders the CTA due to defaults, which makes it hard to avoid a self-link CTA on /submit. Consider supporting null (or a boolean) to explicitly hide it.

 interface NavbarProps {
   backHref?: string
   backLabel?: string
-  ctaHref?: string
-  ctaLabel?: string
+  ctaHref?: string | null
+  ctaLabel?: string | null
 }
 
-export function Navbar({ backHref, backLabel, ctaHref = "/submit", ctaLabel = "Submit article" }: NavbarProps) {
+export function Navbar({
+  backHref,
+  backLabel,
+  ctaHref = "/submit",
+  ctaLabel = "Submit article",
+}: NavbarProps) {
   return (
@@
-          {ctaHref && ctaLabel ? (
+          {ctaHref && ctaLabel ? (
             <Link
               href={ctaHref}
@@
           ) : null}

Then consumers can do: ctaHref={null} ctaLabel={null} to hide it.

Also applies to: 13-63

---

13-64: Pick either named export or default export to avoid inconsistent imports.
Exporting both is fine, but it tends to drift across the codebase; consider keeping just one style.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 113d28d and b110201.

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (4)

• app/a/[slug]/BlogPostClient.tsx (1 hunks)
• app/page.tsx (2 hunks)
• app/submit/page.tsx (2 hunks)
• components/navbar.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (3)

app/page.tsx (1)

components/navbar.tsx (1)

• Navbar (13-62)

app/a/[slug]/BlogPostClient.tsx (2)

lib/blog.ts (1)

• BlogPost (3-12)

components/navbar.tsx (1)

• Navbar (13-62)

app/submit/page.tsx (1)

components/navbar.tsx (1)

• Navbar (13-62)

🔇 Additional comments (2)

app/a/[slug]/BlogPostClient.tsx (1)

3-3: Navbar integration looks good (consistent back navigation).

Also applies to: 8-14

app/page.tsx (1)

9-10: LGTM: home page uses the shared Navbar cleanly.

Also applies to: 100-103

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Avoid CTA self-link on the Submit page.
With current Navbar defaults, this page will render a “Submit article” CTA that links to the current route (/submit). Once Navbar supports disabling CTA, pass ctaHref={null} ctaLabel={null} (or equivalent).

Also applies to: 15-15

🤖 Prompt for AI Agents

In app/submit/page.tsx around lines 2 to 4 and again at line 15, the page will
render the Navbar's default "Submit article" CTA which links to the current
/submit route; update the Navbar props to disable that CTA by passing
ctaHref={null} and ctaLabel={null} (or the equivalent props your Navbar accepts)
when rendering Navbar so the CTA does not self-link on this page.