LivaNavigationDrawer

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.

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.

Temel kullanım (useNavigationDrawer ile)

Önizleme yükleniyor…

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.

Push varyantı (kontrollü state ile)

Önizleme yükleniyor…

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).

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	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.