useNavbar

import { useNavbar } from 'boltdocs/client'

interface UseNavbarResult {
  links: NavbarLink[]         // Processed navbar links (includes nested dropdowns and active flags)
  title: string               // The resolved site branding title text
  logo: string | null         // URL/path to the active logo image (automatically switches for dark mode)
  logoProps: {                // Logo dimensional and alt-text properties
    alt: string
    width?: number
    height?: number
  }
  github: string | null       // URL path to the GitHub repository (if configured)
  social: SocialLink[]        // Array of custom social link icons and URLs
  theme: 'light' | 'dark'     // The active user theme state
  config: BoltdocsConfig      // Full parsed Boltdocs configuration file
}

import React from 'react'
import { useNavbar } from 'boltdocs/client'

export default function SimpleHeader() {
  const { title, links, logo } = useNavbar()

  return (
    <header className="flex justify-between items-center px-6 py-4">
      <div className="flex items-center gap-2">
        {logo && <img src={logo} alt={title} className="h-6 w-auto" />}
        <span className="font-bold">{title}</span>
      </div>
      
      <nav className="flex gap-4">
        {links.map((link) => (
          <a
            key={link.href}
            href={link.href}
            className={link.active ? 'text-primary' : 'text-muted'}
          >
            {link.label}
          </a>
        ))}
      </nav>
    </header>
  )
}