Header Variants Test

AppHeader komponentinin özellikleri ve kullanımı

Mevcut Header

Şu an kullandığınız header AppHeader komponenti

Özellikler:

✅ Sticky positioning (sayfayı kaydırınca yukarıda kalır)
✅ Breadcrumb navigation (sayfa yolu gösterimi)
✅ Sidebar toggle butonu (hamburger menu)
✅ Responsive tasarım
✅ Theme uyumlu (dark/light mode)

Mevcut Breadcrumb:

Test & Geliştirme/Layout Kit Test/Header Variants

AppHeader Props

Özelleştirilebilir özellikler

Prop	Tip	Varsayılan	Açıklama
breadcrumbs	BreadcrumbData[]	undefined	Breadcrumb yolu (opsiyonel)
showSearch	boolean	false	Arama kutusu göster
showNotifications	boolean	false	Bildirim ikonu göster

Kullanım Örneği

import { AppHeader } from '@hascanb/arf-ui-kit/layout-kit'

<AppHeader
  breadcrumbs={[
    { label: "Ana Sayfa", href: "/" },
    { label: "Ürünler", href: "/products" },
    { label: "Yeni Ürün" },
  ]}
  showSearch={true}
  showNotifications={true}
/>

Header Varyasyonları

Farklı kullanım senaryoları

1. Minimal Header

Sadece sidebar toggle - breadcrumb yok

<AppHeader />

2. Breadcrumb ile

Sayfa yolu gösterimi (mevcut kullanım)

<AppHeader breadcrumbs={[...]} />

3. Full Featured

Arama + bildirim + breadcrumb

<AppHeader
  breadcrumbs={[...]}
  showSearch={true}
  showNotifications={true}
/>

Type Definitions

interface BreadcrumbData {
  label: string
  href?: string
}

interface AppHeaderProps {
  breadcrumbs?: BreadcrumbData[]
  showSearch?: boolean
  showNotifications?: boolean
}

Sticky Header Demo

Sayfayı aşağı kaydırın, header yukarıda kalır

Header position: sticky özelliğine sahip. Sayfayı kaydırdığınızda header her zaman görünür kalır.

Bu alanı kaydırdığınızda üstteki header sabit kalır. Böylece sticky davranışı canlı olarak test edebilirsiniz.