ChapterNavigation

Navigation component for guide chapters that displays parent, sibling, and child chapter links.

Props

Prop	Type	Required	Default	Description
`guide`	`Guide`	Yes	-	Current guide data
`parentGuide`	`Guide \| null`	No	-	Parent guide (if current is a chapter)
`currentPath`	`string`	Yes	-	Current page path for active state

Usage

1import ChapterNavigation from '@/components/molecules/ChapterNavigation';
2import { getParentGuide } from '@/lib/contentstack';
3
4// In a server component
5const parentGuide = guide.chapter === true 
6  ? await getParentGuide(path)
7  : null;
8
9<ChapterNavigation
10  guide={guide}
11  parentGuide={parentGuide}
12  currentPath={path}
13/>

import ChapterNavigation from '@/components/molecules/ChapterNavigation';
import { getParentGuide } from '@/lib/contentstack';

// In a server component
const parentGuide = guide.chapter === true 
  ? await getParentGuide(path)
  : null;

<ChapterNavigation
  guide={guide}
  parentGuide={parentGuide}
  currentPath={path}
/>

Features

Parent guide link: Shows "Back to [Parent Guide]" for chapters
Sibling chapters: Lists other chapters of the same parent
Child chapters: Lists chapters belonging to the current guide
Active state: Highlights current chapter with accent color and border
Independent rendering: Renders separately from table of contents

Behavior

For Main Guides (not chapters)

Shows "Chapters" heading
Lists all child chapters
Highlights current chapter if viewing a child

For Chapters

Shows "Chapter Navigation" heading
Displays "Back to [Parent Guide]" link
Lists sibling chapters under "Other Chapters"
Highlights current chapter in sibling list

Rendering Logic

The component renders when:

Guide has chapters (guide.chapters.length > 0)
Guide is a chapter (guide.chapter === true)
Parent guide exists with chapters (for sibling navigation)

Returns null if none of the above conditions are met.

Styling

Active chapter: Teal accent color with left border
Inactive chapters: Light text color with hover effect
Consistent spacing with other sidebar components (mb-6)

Notes

Server-side component (can use async/await)
Filters out chapters without URLs
Uses Next.js Link for client-side navigation
Independent from TableOfContents component
Handles empty or undefined chapter arrays gracefully