Header

Main site header component combining AnnouncementBar and MainNavigation. Fetches data dynamically from Contentstack.

Props

None - uses HeaderProvider context for data.

Usage

import Header from '@/components/organisms/Header';

// Header must be wrapped in HeaderProvider (done in app/layout.tsx)
<Header />

Features

• Dynamic data: Fetches header data from Contentstack Header content type
• Announcement bar: Top announcement with utility navigation
• Main navigation: Desktop and mobile navigation
• CSLP support: Full Contentstack Live Preview support for visual building
• SSR/CSR: Works in both server-side and client-side rendering modes

Data Flow

1. SSR (Production):

   • Header fetched in app/layout.tsx server-side
   • Data passed to HeaderProvider as initial value
   • Header component reads from context

2. CSR (Preview):

   • Preview component fetches header and updates context
   • Header updates automatically when content changes

Structure

1. AnnouncementBar

   • Announcement text and URL from Contentstack
   • Utility navigation links from announcement_navigation

2. MainNavigation

   • DesktopNavigation (logo, search, nav buttons)
   • MobileNavigation (hamburger menu, drawer)
   • Navigation links from main_navigation

CSLP Support

All header fields support Contentstack Live Preview:

• announcement - Announcement text and link
• main_navigation - Main navigation wrapper
• main_navigation.links - Individual navigation links
• show_search - Search bar visibility

Notes

• Requires HeaderProvider wrapper (provided in root layout)
• Data fetched from Contentstack Header content type
• Supports both simple Link objects and entry references in navigation
• Header is cached per request using React cache()
• Only fetches header in preview mode alongside page/blog data