# LivaMenu
Package: @dataliva/livalib
Description: @dataliva/livalib tıklanabilir tetikleyiciye bağlı açılır menü bileşeni.

Herhangi bir tetikleyici öğeye (`trigger`) bağlanan, tıklanınca açılan menü
bileşeni. DevExtreme `ContextMenu` üzerine kuruludur; menü öğeleri `items`
dizisiyle veri odaklı tanımlanır ve konumu `position` ile ayarlanır.

> **Not:** Bu bileşen henüz yayınlanmış `@dataliva/livalib` sürümünde dışa
> aktarılmıyor; bu sayfa API'yi belgeler, canlı demo bir sonraki sürümle
> eklenecektir.

```tsx
import { LivaMenu } from "@dataliva/livalib";
```

## Temel kullanım

Bir tetikleyici (buton, avatar, ikon vb.) ve menü öğelerini verin. Tetikleyiciye
tıklandığında menü, `position` ile belirtilen yerde açılır.

```tsx
<LivaMenu
  trigger={<LivaButton text="Menü" />}
  items={[
    { id: "profile", text: "Profil", onClick: () => openProfile() },
    { id: "settings", text: "Ayarlar", onClick: () => openSettings() },
    { id: "logout", text: "Çıkış", onClick: () => logout() },
  ]}
/>
```

## Konumlandırma

`position` menünün tetikleyiciye göre nereden açılacağını belirler; `offset`
ile piksel bazında ince ayar yapılır.

```tsx
<LivaMenu
  trigger={<LivaIconButton icon="overflow" />}
  position="bottom-end"
  offset={6}
  items={items}
/>
```

Geçerli `position` değerleri: `bottom`, `bottom-start`, `bottom-end`, `top`,
`top-start`, `top-end`, `left`, `left-start`, `left-end`, `right`,
`right-start`, `right-end`.

## Menü öğeleri

Her öğe `LivaMenuItem` tipindedir. `type` alanı öğenin görünümünü belirler:
`item` (varsayılan, tıklanabilir), `label` (tıklanamayan başlık) ve `divider`
(ayraç).

```tsx
const items: LivaMenuItem[] = [
  { id: "grp", text: "Hesap", type: "label" },
  { id: "profile", text: "Profil", icon: <UserIcon />, onClick: onProfile },
  { id: "sep", type: "divider" },
  { id: "logout", text: "Çıkış", onClick: onLogout, style: { color: "red" } },
];
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `items` | `LivaMenuItem[]` | — (zorunlu) |
| `trigger` | `React.ReactNode` | — (zorunlu) |
| `position` | `"bottom" \| "bottom-start" \| "bottom-end" \| "top" \| "top-start" \| "top-end" \| "left" \| "left-start" \| "left-end" \| "right" \| "right-start" \| "right-end"` | `"bottom"` |
| `offset` | `number` | `3` |

### LivaMenuItem

| Alan | Tip | Açıklama |
|------|------|---------|
| `id` | `string` | Benzersiz kimlik (zorunlu) |
| `text` | `string` | Öğe metni |
| `icon` | `React.ReactNode` | Metnin solunda gösterilen simge |
| `type` | `"item" \| "label" \| "divider"` | Öğe türü (varsayılan `item`) |
| `onClick` | `() => void` | `item` türünde tıklama eylemi |
| `style` | `React.CSSProperties` | Öğe satırına özel stil |
| `items` | `LivaMenuItem[]` | Alt menü öğeleri |