# Navbar

> Top navigation bar — brand + links + actions slot. Tự collapse hamburger menu trên mobile.

**Archetype mapping:** C (Landing) · D (Editorial) · A (Dashboard) — top-level nav cho hầu hết archetype.

## API

| Prop | Type | Default | Description |
|---|---|---|---|
| `brand` | `ReactNode` | — | Logo/brand name (text-text font-semibold) |
| `links` | `NavLink[]` | `[]` | Danh sách link nav center |
| `actions` | `ReactNode` | — | Slot phải — buttons/avatar/dropdown |
| `className` | `string` | — | Override nav |

### `NavLink`

| Field | Type | Description |
|---|---|---|
| `label` | `string` | Text link |
| `href` | `string` | URL |
| `active` | `boolean?` | Highlight current page (bg-surface-2) |

## Variants

Không có variant style. Single layout:
- Desktop (md+): brand + links inline + actions phải
- Mobile (<md): brand + hamburger toggle, links/actions stack vertical khi mở

## Composition

Standalone — không có sub-component. Actions slot accept bất kỳ ReactNode:

```tsx
actions={
  <>
    <Button variant="ghost">Đăng nhập</Button>
    <Button>Đăng ký</Button>
  </>
}
```

## States

- **Default desktop**: brand + links + actions inline
- **Mobile collapsed**: chỉ brand + hamburger button
- **Mobile expanded**: hamburger chuyển thành X, drawer dropdown vertical với links + actions
- **Link active**: `aria-current="page"` + bg-surface-2

## Usage

```tsx
import { Navbar, Button } from '@cowork/ui';

<Navbar
  brand={<span>An Nhiên</span>}
  links={[
    { label: 'Sản phẩm', href: '/products', active: pathname === '/products' },
    { label: 'Câu chuyện', href: '/about' },
    { label: 'Blog', href: '/blog' },
    { label: 'Liên hệ', href: '/contact' },
  ]}
  actions={
    <>
      <Button variant="ghost" size="sm">Đăng nhập</Button>
      <Button size="sm">Giỏ hàng (3)</Button>
    </>
  }
/>
```

## Real-world example

- An Nhien landing: brand logo + 4 links (Sản phẩm / Câu chuyện / Blog / Liên hệ) + actions (Cart + Login).
- KHI Wellness landing: brand "KHI" + 3 links (Pricing / Members / Blog) + actions (Đặt lịch học CTA primary).
- A-Kryphan blog: brand "kryphan" + 2 links (Blog / About) + actions (Subscribe button).

## Accessibility

- `<nav>` element native
- Links có `aria-current="page"` khi `active`
- Hamburger button có `aria-label="Toggle menu"` + `aria-expanded`
- Mobile menu: caller có thể wrap với `inert` cho main content khi mở (chưa built-in)

## Responsive behavior

- Desktop (`md:flex`): links inline center, actions inline phải
- Mobile (`md:hidden`): hamburger toggle, dropdown stack vertical bên dưới nav
- Brand luôn visible cả 2 breakpoint
- **Collapse logic**: state internal — không persist sang route change. Caller có thể wrap với router để auto-close on navigate

## Related

- [[Sidebar]] — persistent left nav cho admin/dashboard, complement với Navbar mỏng top
- [[Breadcrumb]] — đặt dưới Navbar cho nested page
- [[Hero]] — section ngay dưới Navbar trong landing flow

## Source

`react/src/organisms/Navbar.tsx`