All Docs
FeaturesDepositClearUpdated March 12, 2026

MOB-23: Responsive Header — Mobile Navigation for Landing & Pricing Pages

MOB-23: Responsive Header — Mobile Navigation for Landing & Pricing Pages

Version: 0.1.206
Category: Component Patterns

Overview

Prior to this release, the landing page (/) and pricing page (/pricing) had no mobile navigation pattern. Both pages rendered their full header nav — LandingNavLinks and PricingNavLinks respectively — as an inline flex row at every viewport width. On small screens (e.g. 375 px), this resulted in cramped or inaccessible navigation with no hamburger menu or collapsible drawer.

This release fixes both pages by introducing a standard responsive header pattern consistent with the rest of the platform.

Problem

  • Landing page (src/app/page.tsx): The nav used flex items-center gap-4 at all breakpoints. The Sign In and Get Started (with ArrowRight icon) buttons were visible inline on mobile but cramped.
  • Pricing page (src/app/pricing/page.tsx): No mobile navigation pattern existed at all — the full nav was rendered at every breakpoint without any responsive behaviour.

Neither page implemented a hamburger menu or responsive collapse.

Solution

The fix applies the following responsive header pattern to both the landing and pricing pages:

Desktop (≥ md breakpoint)

The nav links container uses hidden md:flex to ensure it is only visible on medium screens and above. CTA buttons use hidden md:inline-flex.

Mobile (< md breakpoint)

A hamburger button marked md:hidden is added to the header. Tapping it opens a mobile menu — either the existing platform MobileNav component or a lightweight Sheet component — providing full navigation access on narrow viewports.

Implementation Pattern

{/* Desktop navigation */}
<div className="hidden md:flex items-center gap-4">
  <LandingNavLinks />
  <Button variant="ghost" className="hidden md:inline-flex">Sign In</Button>
  <Button className="hidden md:inline-flex">
    Get Started <ArrowRight className="ml-2 h-4 w-4" />
  </Button>
</div>

{/* Mobile navigation */}
<div className="md:hidden">
  <MobileLandingMenu />
</div>

Note: MobileLandingMenu can use the existing MobileNav pattern already present in the codebase, or a Sheet component for a slide-in drawer experience.

Files Changed

FileChange
src/app/page.tsxAdded responsive nav with hidden md:flex desktop container and md:hidden mobile hamburger/menu
src/app/pricing/page.tsxAdded responsive nav pattern; previously had no mobile navigation at all

Breakpoints

This change uses Tailwind CSS's md breakpoint (768 px) as the threshold between mobile and desktop navigation layouts, consistent with the platform's existing responsive conventions.

Related

  • Ticket: MOB-23
  • Release: v0.1.206