Yatay düzen

05 · Düzen

Üst menülü panel düzeni. Menü geniş ekranda üst çubukta yatay durur, lg altında soldan açılan çekmeceye geçer. Menüsü kısa olan uygulamalar için dikey düzene bir alternatiftir.

acun:layout.horizontal

→ Yatay düzeni tam sayfa aç

Temel kullanım

Üst menüyü nav slot'una acun:nav.horizontal-item ve acun:nav.horizontal-group ile kurun; gruplardaki bağlantılar compact alt öğelerdir. Dikey düzenden farklı olarak logo slot'u verilirse marka adı ayrıca yazılmaz; logo ile adı slot'ta birlikte verin.

BLADE

<acun:layout.horizontal :title="$title ?? null" brand-name="Acun Panel" :home-url="route('dashboard')">
    <acun:slot:head>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </acun:slot:head>

    <acun:slot:nav>
        <acun:nav.horizontal-item :href="route('dashboard')" title="Anasayfa" :active="request()->routeIs('dashboard')" />
        <acun:nav.horizontal-group title="Müşteriler" :active="request()->routeIs('musteriler.*')">
            <acun:nav.sub-item compact :href="route('musteriler.index')" title="Müşteri Listesi" />
            <acun:nav.sub-item compact :href="route('musteri-gruplari.index')" title="Müşteri Grupları" />
        </acun:nav.horizontal-group>
    </acun:slot:nav>

    {{ $slot }}
</acun:layout.horizontal>

Prop	Değerler
`brand-name`	Logonun yanındaki ad; verilmezse config('app.name')
`home-url`	Logonun bağlantısı; verilmezse url('/')
`title`	Sekme başlığı

Mobil menü

lg altında yatay menü gizlenir ve menü düğmesi soldan bir çekmece açar. Çekmecede mobileNav slot'u, verilmezse nav çizilir; yatay öğeler çekmecede iyi görünmediği için burada dikey menü öğelerini (acun:nav.item, acun:nav.group) verin. Çekmece başlığı drawer-title, alt kısmı drawerFooter ile ayarlanır.

BLADE

<acun:layout.horizontal brand-name="Acun Panel" drawer-title="Menü">
    <acun:slot:nav>…</acun:slot:nav>

    <acun:slot:mobileNav>
        <acun:nav.item :href="route('dashboard')" title="Anasayfa" />
        <acun:nav.group title="Müşteriler">
            <acun:nav.sub-item :href="route('musteriler.index')" title="Müşteri Listesi" />
            <acun:nav.sub-item :href="route('musteri-gruplari.index')" title="Müşteri Grupları" />
        </acun:nav.group>
    </acun:slot:mobileNav>

    <acun:slot:drawerFooter>
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <acun:button type="submit" variant="ghost" class="w-full">Çıkış Yap</acun:button>
        </form>
    </acun:slot:drawerFooter>

    {{ $slot }}
</acun:layout.horizontal>

Prop	Değerler
`drawer-title`	Çekmecenin başlığı; verilmezse brand-name

Üst çubuk

Menünün sağında sırasıyla search (yalnızca xl ve üstü), actions, tema düğmesi ve userMenu yer alır. Tema düğmesini kaldırmak için :theme-toggle="false" verin.

BLADE

<acun:layout.horizontal brand-name="Acun Panel">
    <acun:slot:nav>…</acun:slot:nav>

    <acun:slot:search>
        <acun:command-palette :items="$aramaOgeleri" />
    </acun:slot:search>

    <acun:slot:userMenu>
        <acun:user-menu :name="auth()->user()->name">
            <acun:dropdown.item :href="route('profil.duzenle')" wire:navigate>Ayarlar</acun:dropdown.item>
        </acun:user-menu>
    </acun:slot:userMenu>

    {{ $slot }}
</acun:layout.horizontal>

Prop	Değerler
`theme-toggle`	true \| false

Tercihler ve özelleştirici

Tema, ana renk, çerçeveli görünüm ve tercihlerin kaydı dikey düzendeki gibi çalışır. Yatay düzende yan menü olmadığı için sidebar-mode, navbar-mode ve semi-dark yoktur; customizer panelinde de menü ve üst çubuk seçenekleri gösterilmez.

BLADE

<acun:layout.horizontal
    brand-name="Acun Panel"
    :theme="auth()->user()?->tema_tercihi"
    :brand-color="auth()->user()?->marka_rengi"
    :preference-url="route('arayuz-tercihi.guncelle')"
    skin="bordered"
    customizer
>
    {{ $slot }}
</acun:layout.horizontal>

Prop	Değerler
`theme`	light \| dark \| system
`brand-color`	default \| green \| red \| yellow \| blue \| gray \| dark \| #rrggbb
`skin`	default \| bordered
`customizer`	true \| false

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`title`	`null`	Sekme başlığı; verilmezse uygulama adı
`brand-name`	`config('app.name')`	Logonun yanındaki marka adı (logo slot'u yoksa)
`home-url`	`url('/')`	Logonun bağlantısı
`drawer-title`	`null`	Mobil çekmecenin başlığı; verilmezse brand-name
`theme-toggle`	`true`	Üst çubuktaki tema düğmesi
`theme`	`null`	light · dark · system; null ise tarayıcıdaki tercih
`brand-color`	`null`	default · green · red · yellow · blue · gray · dark · #rrggbb
`preference-url`	`null`	Görünüm tercihlerinin POST edileceği adres
`skin`	`null`	default · bordered
`customizer`	`false`	Sağ kenarda görünüm özelleştirici (menü seçenekleri olmadan)
`stacked`	`false`	Menü logo, arama ve kullanıcı menüsünün altında kendi satırında; tek satıra sığmayan uzun menüler için

Slot'lar: head, logo, nav, mobileNav, search, actions, userMenu, drawerFooter, varsayılan (sayfa içeriği)