Skip to content

Header

Responsive navigation header with mobile menu and sign-in button.

Usage

javascript
import Header from "@/components/Header";

// Wrap in Suspense (required — uses useSearchParams internally)
<Suspense>
  <Header />
</Suspense>

Behavior

  • Desktop: horizontal nav links + sign-in button
  • Mobile: hamburger menu that expands to full nav
  • Automatically shows user account button when signed in
  • Links configured inside the component file

Customization

Edit /components/Header.js to:

  • Change nav links
  • Update the logo (references logoAndName.png from /public)
  • Adjust the CTA button in the header

Place logoAndName.png in /public. NextAuth also uses this file on login pages.

See Also