<!-- source-hash: 4633bf326c83cafab121a9892b6f77f9 -->
A React component that handles client-side rendering of headers with hydration-safe mounting to prevent server-client mismatch errors.

## Key Components

- **`ClientOnlyHeader`** - Main component that conditionally renders header based on client-side mounting state
- **`ClientOnlyHeaderProps`** - Interface defining config and optional skeleton props
- **Client-side state management** - Uses `useState` and `useEffect` to track hydration status

## Usage Example

```typescript
import { ClientOnlyHeader } from './client-only-header';
import { CustomSkeleton } from './custom-skeleton';

// Basic usage with default skeleton
<ClientOnlyHeader 
  config={{
    title: "My App",
    navigation: [
      { label: "Home", href: "/" },
      { label: "About", href: "/about" }
    ]
  }}
/>

// With custom loading skeleton
<ClientOnlyHeader 
  config={headerConfig}
  skeleton={<CustomSkeleton />}
/>
```

The component prevents hydration mismatches by showing a skeleton during server-side rendering, then switching to the full interactive header once client-side JavaScript loads. This pattern is essential for headers containing client-side features like theme toggles or dynamic navigation states.