# LivaNavigationDrawer
Package: @dataliva/livalib
Description: @dataliva/livalib gezinme menülü kayar panel bileşeni ve useNavigationDrawer hook'u.

`LivaDrawer`'ın gezinmeye özel sürümü: panel içinde başlık, logo ve seçim
yönetimli bir menü listesi hazır gelir. Görünürlük ve seçim durumunu
kolayca yönetmek için `useNavigationDrawer` hook'u ile birlikte kullanılır.

```tsx
import { LivaNavigationDrawer, useNavigationDrawer } from "@dataliva/livalib";
```

## Temel kullanım

`navigationItems` içindeki her öğe `id` ve `text` alanlarını taşır; `icon`
DevExtreme ikon adıdır (`home` gibi, `dx-icon-home` sınıfına çevrilir).
`badge` sayı ya da metin rozeti gösterir, `disabled` öğeyi devre dışı
bırakır. Örnekte `closeOnItemClick={false}` verildiği için seçim sonrası
panel açık kalır; varsayılan davranış seçimde paneli kapatmaktır.

**Örnek — Temel kullanım (useNavigationDrawer ile):**

```tsx
const drawer = useNavigationDrawer(true);

const navigationItems = [
  { id: "dashboard", text: "Ana Sayfa", icon: "home" },
  { id: "raporlar", text: "Raporlar", icon: "chart", badge: 3 },
  { id: "ayarlar", text: "Ayarlar", icon: "preferences" },
  { id: "arsiv", text: "Arşiv", icon: "box", disabled: true },
];

<LivaNavigationDrawer
  visible={drawer.visible}
  onVisibilityChange={drawer.onVisibilityChange}
  headerTitle="LivaBudget"
  navigationItems={navigationItems}
  selectedItemId={drawer.selectedItemId}
  onSelectedItemChange={(itemId) => drawer.setSelectedItemId(itemId)}
  closeOnItemClick={false}
  height="100%"
>
  <div style={{ padding: 16 }}>
    <LivaButton text="Menüyü Aç / Kapat" onClick={drawer.toggle} />
    <p style={{ marginTop: 12 }}>
      Seçili öğe: {drawer.selectedItemId ?? "henüz seçilmedi"}
    </p>
  </div>
</LivaNavigationDrawer>
```

## Push varyantı

Hook yerine kendi state'inizle de kontrol edebilirsiniz. `variant="push"`
panel açılırken ana içeriği iter; `size` hazır boyut adı (`small` 250,
`medium` 300, `large` 400 piksel) ya da sayı alır.

**Örnek — Push varyantı (kontrollü state ile):**

```tsx
const [visible, setVisible] = useState(true);

<LivaNavigationDrawer
  visible={visible}
  onVisibilityChange={setVisible}
  variant="push"
  size="small"
  headerTitle="Menü"
  navigationItems={[
    { id: "dashboard", text: "Ana Sayfa", icon: "home" },
    { id: "raporlar", text: "Raporlar", icon: "chart" },
    { id: "ayarlar", text: "Ayarlar", icon: "preferences" },
  ]}
  closeOnItemClick={false}
  height="100%"
>
  <div style={{ padding: 16 }}>
    <LivaButton
      text="Menüyü Aç / Kapat"
      onClick={() => setVisible((v) => !v)}
    />
    <p style={{ marginTop: 12 }}>
      Panel açılınca ana içerik sağa itilir.
    </p>
  </div>
</LivaNavigationDrawer>
```

## useNavigationDrawer

Görünürlük ve seçili öğe state'ini tek yerde toplayan yardımcı hook.
`useNavigationDrawer(initialVisible?)` imzasıyla çağrılır (varsayılan
`false`).

```tsx
const drawer = useNavigationDrawer(true);

// drawer.visible          → panel açık mı
// drawer.selectedItemId   → seçili öğenin id'si
// drawer.toggle()         → aç / kapat
// drawer.open()           → aç
// drawer.close()          → kapat
// drawer.setSelectedItemId("raporlar")
// drawer.onVisibilityChange → visible prop'u ile eşlemek için setter
```

| Alan | Tip | Açıklama |
|------|------|---------|
| `visible` | `boolean` | Panelin açık olup olmadığı |
| `selectedItemId` | `string \| undefined` | Seçili öğe kimliği |
| `toggle` | `() => void` | Görünürlüğü tersine çevirir |
| `open` / `close` | `() => void` | Paneli açar / kapatır |
| `setSelectedItemId` | `(id) => void` | Seçili öğeyi günceller |
| `onVisibilityChange` | `(visible) => void` | `onVisibilityChange` prop'una verilir |

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `visible` | `boolean` | `false` |
| `onVisibilityChange` | `(visible: boolean) => void` | — |
| `variant` | `'overlay' \| 'push' \| 'shrink'` | `'overlay'` |
| `size` | `'small' \| 'medium' \| 'large' \| number` | `'medium'` |
| `minSize` | `number` | `0` |
| `position` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'left'` |
| `headerTitle` | `string` | — |
| `headerLogo` | `string` (görsel URL) | — |
| `navigationItems` | `NavigationItem[]` | `[]` |
| `selectedItemId` | `string` | — |
| `onSelectedItemChange` | `(itemId: string, item: NavigationItem) => void` | — |
| `closeOnItemClick` | `boolean` | `true` |
| `className` | `string` | `''` |
| `children` | `ReactNode` | — (zorunlu) |

`NavigationItem` alanları: `id`, `text`, `icon?`, `badge?`, `disabled?`,
`onClick?`, `path?` ve `items?`. Ayrıca DevExtreme `IDrawerOptions`'tan
gelen prop'lar (ör. `height`, `shading`) aynen aktarılır.