'use client'; /** * Subsection Navigation Component * * Reusable navigation bar for documentation and other subsections * Features: * - Dark nav bar with decorative wave line * - Active state indicator (purple color) * - Responsive (hamburger menu on mobile) * - Three-column layout matching docs structure * - Customizable left/right slots * * Uses ThreeColumnLayout for consistent alignment with docs pages. * Columns align with docs layout at all screen widths. * * Usage: * } * rightSlot={} * /> */ import { useState, ReactNode } from 'react'; import { ThreeColumnLayout } from '@/components/layout/ThreeColumnLayout'; interface NavItem { label: string; href: string; } interface SubsectionNavProps { items: NavItem[]; currentPath: string; ctaText?: string; ctaHref?: string; onCtaClick?: () => void; /** Optional content for left column (w-64, hidden until lg) */ leftSlot?: ReactNode; /** Optional content for right column (w-56, hidden until xl) */ rightSlot?: ReactNode; } export const SubsectionNav = ({ items, currentPath, leftSlot, rightSlot }: SubsectionNavProps) => { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const isActive = (href: string) => currentPath.startsWith(href); return ( ); };