# LivaLayout
Package: @dataliva/livalib
Description: @dataliva/livalib uygulama yerleşim (layout) bileşeni.

Uygulamanın genel iskeletini kuran yerleşim bileşeni: üst bar (header),
daraltılabilir kenar çubuğu (sidebar), alt bilgi (footer) ve ana içerik
alanını tek bileşende toplar. Kenar çubuğunda gezinme menüsü, kullanıcı
kartı ve isteğe bağlı spotlight araması bulunur.

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

## Tam yerleşim

`navigationItems` ile gezinme ağacı, `user` ile kullanıcı kartı ve
`footerText` ile alt bilgi tanımlanır. `currentPathname` verilen öğe menüde
aktif olarak vurgulanır. Bileşen normalde `height="100vh"` ile tüm ekranı
kaplar; aşağıdaki önizlemede sınırlı yükseklikteki bir kapsayıcı içinde
`height="100%"` ile gösterilmektedir.

Her gezinme öğesinde `items` alanı zorunludur; alt öğesi olmayanlar için
boş dizi verilir. `icon` alanı bir CSS sınıfı bekler (ör. DevExtreme
ikonları için `dx-icon dx-icon-home`).

**Örnek — Tam yerleşim (header + sidebar + footer):**

```tsx
const navigationItems = [
  {
    id: "dashboard",
    text: "Ana Sayfa",
    href: "/dashboard",
    icon: "dx-icon dx-icon-home",
    items: [],
  },
  {
    id: "raporlar",
    text: "Raporlar",
    icon: "dx-icon dx-icon-chart",
    expanded: true,
    items: [
      { id: "satis", text: "Satış Raporu", href: "/raporlar/satis", items: [] },
      { id: "gider", text: "Gider Raporu", href: "/raporlar/gider", items: [] },
    ],
  },
  {
    id: "ayarlar",
    text: "Ayarlar",
    href: "/ayarlar",
    icon: "dx-icon dx-icon-preferences",
    items: [],
  },
];

<LivaLayout
  height="100%"
  headerTitle="LivaBudget"
  logoText="LivaBudget"
  logoIcon="LB"
  navigationItems={navigationItems}
  currentPathname="/raporlar/satis"
  sidebarWidth={260}
  user={{ FullName: "Ayşe Yılmaz", Role: "Bütçe Yöneticisi" }}
  footerText="© 2026 Dataliva"
  onNavigationItemClick={(item) => console.log(item.text)}
>
  <p>Ana içerik alanı</p>
</LivaLayout>
```

## Sade yerleşim

`showSidebar`, `showFooter` ve `showUserCard` ile bölümler tek tek
kapatılabilir. `headerRightElement` üst barın sağına özel içerik yerleştirir.

**Örnek — Sade yerleşim (yalnızca üst bar):**

```tsx
<LivaLayout
  height="100%"
  showSidebar={false}
  showFooter={false}
  showUserCard={false}
  headerTitle="Raporlar"
  headerRightElement={<LivaButton text="Yeni Rapor" size="small" />}
>
  <p>Kenar çubuğu ve alt bilgi kapatıldı; yalnızca üst bar görünür.</p>
</LivaLayout>
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `showHeader` | `boolean` | `true` |
| `showSidebar` | `boolean` | `true` |
| `showFooter` | `boolean` | `true` |
| `headerTitle` | `ReactNode` | `''` |
| `headerRightElement` | `ReactNode` | — |
| `logoText` / `logoIcon` | `ReactNode` | — |
| `showUserCard` | `boolean` | `true` |
| `user` | `{ FullName: string \| null; Role?: string \| null }` | — |
| `navigationItems` | `NavigationItem[]` | — |
| `currentPathname` | `string` | `window.location.pathname` |
| `sidebarWidth` | `number \| string` | `330` |
| `sidebarCollapsed` | `boolean` | `false` |
| `sidebarPosition` | `'left' \| 'right'` | `'left'` |
| `menuMode` | `'standard' \| 'accordion'` | `'standard'` |
| `height` | `number \| string` | `'100vh'` |

Ayrıca `footerText`, `withBorders` (varsayılan `true`), `layoutPadding`
(varsayılan `24`), `onNavigationItemClick`, `onSidebarToggle`,
`spotlightEnabled` ve `sidebarFooterItems` gibi prop'lar da desteklenir.
`NavigationItem` şu alanlardan oluşur: `id`, `text`, `href?`, `icon?`,
`expanded?` ve zorunlu `items` dizisi.