# NavBar

A slot-based application header with `StartSlot`, `Center`, and `EndSlot` regions. Three height variants for compact, standard, and marketing layouts.

## Installation

```bash
npm install @xsolla/xui-nav-bar
```

## Imports

```tsx
import { NavBar } from '@xsolla/xui-nav-bar';
```

`NavBar.StartSlot`, `NavBar.Center`, and `NavBar.EndSlot` are attached to the root component.

## Quick start

```tsx
import * as React from 'react';
import { NavBar } from '@xsolla/xui-nav-bar';
import { Xsolla } from '@xsolla/xui-logos-xsolla';
import { Button } from '@xsolla/xui-button';

export default function Example() {
  return (
    <NavBar>
      <NavBar.StartSlot>
        <Xsolla variant="full" size="sm" />
      </NavBar.StartSlot>
      <NavBar.Center>Navigation</NavBar.Center>
      <NavBar.EndSlot>
        <Button size="sm">Sign In</Button>
      </NavBar.EndSlot>
    </NavBar>
  );
}
```

## API Reference

### `<NavBar>`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | Slot components (`StartSlot`, `Center`, `EndSlot`). |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Height preset. `sm` = 48px / 12px horizontal padding, `md` = 64px / 16px, `lg` = 80px / 20px. |
| `bordered` | `boolean` | `false` | Show a 1px bottom border. |
| `backgroundColor` | `string` | theme `background.primary` | Custom background colour. |
| `testID` | `string` | - | Test identifier. |

Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).

Layout: `StartSlot` and `EndSlot` share `flex: 1`; `Center` takes `flex: 2`. Each slot uses `flex-direction: row` with an `8px` gap between children.

### `<NavBar.StartSlot>` / `<NavBar.Center>` / `<NavBar.EndSlot>`

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `ReactNode` | Slot content. |
| `testID` | `string` | Test identifier. |

`StartSlot` aligns to the start, `EndSlot` to the end, `Center` to the centre.

## Examples

### Application header

```tsx
import * as React from 'react';
import { NavBar } from '@xsolla/xui-nav-bar';
import { Xsolla } from '@xsolla/xui-logos-xsolla';
import { Button, IconButton } from '@xsolla/xui-button';
import { Bell, Menu } from '@xsolla/xui-icons-base';

export default function AppHeader() {
  return (
    <NavBar size="md" bordered>
      <NavBar.StartSlot>
        <IconButton icon={<Menu size={20} />} variant="secondary" tone="mono" size="sm" aria-label="Menu" />
        <Xsolla variant="full" size="sm" />
      </NavBar.StartSlot>
      <NavBar.Center>
        <nav aria-label="Main navigation" style={{ display: 'flex', gap: 24 }}>
          <a href="/dashboard">Dashboard</a>
          <a href="/products">Products</a>
          <a href="/analytics">Analytics</a>
        </nav>
      </NavBar.Center>
      <NavBar.EndSlot>
        <IconButton icon={<Bell size={20} />} variant="secondary" tone="mono" size="sm" aria-label="Notifications" />
        <Button size="sm">Account</Button>
      </NavBar.EndSlot>
    </NavBar>
  );
}
```

### Mobile header

```tsx
import * as React from 'react';
import { NavBar } from '@xsolla/xui-nav-bar';
import { IconButton } from '@xsolla/xui-button';
import { ArrowLeft, MoreVr } from '@xsolla/xui-icons-base';

export default function MobileHeader() {
  return (
    <NavBar size="sm">
      <NavBar.StartSlot>
        <IconButton icon={<ArrowLeft size={20} />} variant="secondary" tone="mono" size="sm" aria-label="Back" />
      </NavBar.StartSlot>
      <NavBar.Center>
        <strong>Page Title</strong>
      </NavBar.Center>
      <NavBar.EndSlot>
        <IconButton icon={<MoreVr size={20} />} variant="secondary" tone="mono" size="sm" aria-label="More options" />
      </NavBar.EndSlot>
    </NavBar>
  );
}
```

### Marketing header

```tsx
import * as React from 'react';
import { NavBar } from '@xsolla/xui-nav-bar';
import { Xsolla } from '@xsolla/xui-logos-xsolla';
import { Button } from '@xsolla/xui-button';

export default function MarketingHeader() {
  return (
    <NavBar size="lg" backgroundColor="transparent">
      <NavBar.StartSlot>
        <Xsolla variant="full" color="white" size="md" />
      </NavBar.StartSlot>
      <NavBar.Center>
        <nav aria-label="Main navigation" style={{ display: 'flex', gap: 32 }}>
          <a href="/products" style={{ color: '#fff' }}>Products</a>
          <a href="/solutions" style={{ color: '#fff' }}>Solutions</a>
          <a href="/pricing" style={{ color: '#fff' }}>Pricing</a>
          <a href="/resources" style={{ color: '#fff' }}>Resources</a>
        </nav>
      </NavBar.Center>
      <NavBar.EndSlot>
        <Button variant="secondary" size="md">Sign In</Button>
        <Button size="md">Get Started</Button>
      </NavBar.EndSlot>
    </NavBar>
  );
}
```

## Accessibility

- The component renders a plain header container — wrap your link group in a `<nav aria-label="...">` (as in the examples) so the navigation region is announced.
- Provide `aria-label` on every `IconButton` used as an action.
- Mobile menu triggers should reflect `aria-expanded` state.
- Ensure interactive elements have visible focus styles (the toolkit's `Button` and `IconButton` provide them by default).