Kullanıcı menüsü

12 · Menü

Kullanıcı menüsü

Üst çubuğun sağındaki kullanıcı açılır menüsü. Düğmede adın baş harfleri ve geniş ekranda ad görünür; menü öğeleri slot'tan gelir.

acun:user-menu

Temel kullanım

name zorunludur; düğmede baş harflerle birlikte gösterilir (sm altında yalnızca baş harfler). Menü öğelerini acun:dropdown.item ile slot'a koyun; menü düğmenin sağ kenarına hizalı açılır ve bir öğeye tıklanınca kapanır.

CANLI ÖRNEK

<acun:user-menu name="Ayşe Yılmaz">
    <acun:dropdown.item href="#">Profil</acun:dropdown.item>
    <acun:dropdown.item href="#">Ayarlar</acun:dropdown.item>
    <acun:dropdown.item>Çıkış Yap</acun:dropdown.item>
</acun:user-menu>

Prop	Değerler
`name`	Kullanıcının adı (zorunlu)

Baş harfler

Baş harfler adın ilk iki kelimesinden üretilir ("Mehmet Ali Kaya" → MA). Farklı bir kısaltma gerekiyorsa initials ile verin.

CANLI ÖRNEK

<acun:user-menu name="Mehmet Ali Kaya">
    <acun:dropdown.item href="#">Profil</acun:dropdown.item>
</acun:user-menu>
<acun:user-menu name="Mehmet Ali Kaya" initials="MK">
    <acun:dropdown.item href="#">Profil</acun:dropdown.item>
</acun:user-menu>

Prop	Değerler
`initials`	Verilmezse addan üretilir

Düzende

Düzenin userMenu slot'una koyun. Sayfa bağlantılarına wire:navigate ekleyin; çıkış işlemi için @csrf içeren bir form ve type="submit" öğe kullanın. Bileşene verilen diğer öznitelikler (ör. aria-label, class) tetikleyici düğmeye geçer.

BLADE

<acun:slot:userMenu>
    <acun:user-menu :name="auth()->user()->name">
        <acun:dropdown.item :href="route('profil.duzenle')" wire:navigate>Ayarlar</acun:dropdown.item>
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <acun:dropdown.item type="submit">Çıkış Yap</acun:dropdown.item>
        </form>
    </acun:user-menu>
</acun:slot:userMenu>

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`name`	—	Kullanıcının adı (zorunlu)
`initials`	`null`	Verilmezse adın ilk iki kelimesinden üretilir (Ayşe Yılmaz → AY)

Slot'lar: varsayılan (menü öğeleri: acun:dropdown.item)