Düzenler

Dashboard Kabuğu

Birincil yönetim paneli düzeni. Sabit genişlikli bir kenar çubuğu solda bulunur; sağ tarafta yapışkan bir üst çubuk ve kaydırılabilir bir ana içerik alanı yer alır.

<div class="wb-dashboard-shell">

  <!-- Kenar çubuğu -->
  <aside class="wb-sidebar">
    <div class="wb-sidebar-brand">
      <a href="/">Uygulamam</a>
    </div>
    <nav class="wb-sidebar-nav">
      <a href="/dashboard" class="wb-sidebar-link is-active">Dashboard</a>
      <a href="/users"     class="wb-sidebar-link">Kullanıcılar</a>
      <a href="/settings"  class="wb-sidebar-link">Ayarlar</a>
    </nav>
  </aside>

  <!-- Ana gövde -->
  <div class="wb-dashboard-body">

    <!-- Üst gezinme çubuğu -->
    <header class="wb-navbar">
      <button class="wb-btn wb-btn-ghost wb-btn-sm"
              data-wb-toggle="sidebar">☰</button>
      <div style="flex:1"></div>
      <span class="wb-avatar wb-avatar-sm">JD</span>
    </header>

    <!-- Kaydırılabilir içerik -->
    <main class="wb-dashboard-main">
      <div class="wb-container">
        <h1>Sayfa başlığı</h1>
      </div>
    </main>

  </div>
</div>

Kenar çubuğu daraltma (mobil)

Kenar çubuğu mobilde gizlenir. Herhangi bir düğmedeki data-wb-toggle="sidebar", arka plan katmanıyla birlikte açar. WBSidebar bunu otomatik olarak yönetir.

<!-- Navbar'daki hamburger -->
<button data-wb-toggle="sidebar">☰ Menü</button>

<!-- Veya JS ile -->
WBSidebar.open();
WBSidebar.close();

Kenar çubuğu nav grupları

Kenar çubuğu içinde daraltılabilir bölümler için wb-nav-group kullanın.

<nav class="wb-sidebar-nav">
  <a href="#" class="wb-sidebar-link is-active">Dashboard</a>

  <div class="wb-nav-group">
    <button class="wb-nav-group-trigger">
      Kullanıcılar
      <svg class="wb-nav-group-chevron" ...>...</svg>
    </button>
    <div class="wb-nav-group-body">
      <a href="#" class="wb-sidebar-link">Tüm Kullanıcılar</a>
      <a href="#" class="wb-sidebar-link">Roller</a>
      <a href="#" class="wb-sidebar-link">İzinler</a>
    </div>
  </div>

  <a href="#" class="wb-sidebar-link">Ayarlar</a>
</nav>

<!-- Akordeon modu: bir grup açıldığında diğerlerini kapatır -->
<nav class="wb-sidebar-nav" data-wb-nav-group-accordion>
  ...
</nav>

Kimlik Doğrulama Kabuğu

Giriş, kayıt ve şifre sıfırlama sayfaları için ortaya hizalanmış kart düzeni.

<div class="wb-auth">
  <div class="wb-auth-card">

    <div class="wb-auth-logo">
      <!-- Logo buraya -->
    </div>

    <h1 class="wb-auth-title">Hesabınıza giriş yapın</h1>
    <p class="wb-auth-subtitle">Tekrar hoş geldiniz. Kimlik bilgilerinizi girin.</p>

    <form class="wb-auth-form">
      <div class="wb-field">
        <label class="wb-label">E-posta</label>
        <input type="email" class="wb-input" autocomplete="email">
      </div>
      <div class="wb-field">
        <label class="wb-label">Şifre</label>
        <input type="password" class="wb-input" autocomplete="current-password">
      </div>
      <button type="submit" class="wb-btn wb-btn-primary" style="width:100%">
        Giriş yap
      </button>
    </form>

    <p class="wb-auth-footer">
      Hesabınız yok mu? <a href="/register">Kayıt ol</a>
    </p>

  </div>
</div>

Ayarlar Kabuğu

Ayarlar sayfaları için iki sütunlu düzen — yapışkan sol gezinme ve içerik alanı. Genellikle dashboard kabuğunun ana içerik alanı içinde kullanılır.

<div class="wb-settings-shell">

  <!-- Sol gezinme -->
  <nav class="wb-settings-nav">
    <a href="#profile"   class="wb-settings-nav-link is-active">Profil</a>
    <a href="#security"  class="wb-settings-nav-link">Güvenlik</a>
    <a href="#billing"   class="wb-settings-nav-link">Faturalama</a>
    <a href="#team"      class="wb-settings-nav-link">Ekip</a>
  </nav>

  <!-- İçerik -->
  <div class="wb-settings-body">

    <section class="wb-settings-section" id="profile">
      <h2 class="wb-settings-title">Profil</h2>
      <p class="wb-settings-desc">Genel profil bilgilerinizi yönetin.</p>
      <!-- form alanları -->
    </section>

    <section class="wb-settings-section" id="security">
      <h2 class="wb-settings-title">Güvenlik</h2>
      <p class="wb-settings-desc">Şifrenizi ve 2FA ayarlarınızı güncelleyin.</p>
      <!-- form alanları -->
    </section>

  </div>
</div>

İçerik Kabuğu

Yapışkan başlık, kaydırılabilir gövde ve isteğe bağlı altbilgi içeren tek sütunlu düzen. Dashboard ana alanı içindeki detay sayfaları, formlar ve tam sayfa düzenleyiciler için kullanışlıdır.

<div class="wb-content-shell">

  <div class="wb-content-header">
    <h2 class="wb-content-title">Kullanıcıyı düzenle</h2>
    <div class="wb-content-actions">
      <button class="wb-btn wb-btn-ghost wb-btn-sm">Vazgeç</button>
      <button class="wb-btn wb-btn-primary wb-btn-sm">Değişiklikleri kaydet</button>
    </div>
  </div>

  <div class="wb-content-body">
    <!-- form / içerik buraya -->
  </div>

  <div class="wb-content-footer">
    <!-- isteğe bağlı sayfalama / durum -->
  </div>

</div>

Container & Section

Temel içerik genişliği kısıtlaması ve dikey boşluk yardımcıları.

<!-- İçerik genişliğini kısıtla -->
<div class="wb-container">
  ...
</div>

<!-- Dar içerik (formlar, makale) -->
<div class="wb-container-sm">
  ...
</div>

<!-- Dikey bölüm boşluğu -->
<section class="wb-section">
  <div class="wb-container">
    ...
  </div>
</section>

<!-- Yığma düzeni -->
<div class="wb-stack">
  <div class="wb-field">...</div>
  <div class="wb-field">...</div>
  <button class="wb-btn wb-btn-primary">Gönder</button>
</div>

Navbar

Yapışkan üst gezinme çubuğu. Bağımsız (açılış sayfası) olarak veya dashboard kabuğu içinde üst çubuk olarak kullanılabilir.

<header class="wb-navbar">
  <!-- Marka -->
  <a href="/" class="wb-navbar-brand">Uygulamam</a>

  <!-- Nav bağlantıları (mobilde responsive sınıfla gizle) -->
  <nav class="wb-navbar-nav">
    <a href="#" class="wb-navbar-link is-active">Dashboard</a>
    <a href="#" class="wb-navbar-link">Raporlar</a>
    <a href="#" class="wb-navbar-link">Ayarlar</a>
  </nav>

  <!-- Sağ taraf -->
  <div class="wb-navbar-end">
    <button class="docs-mode-btn" data-wb-mode-cycle>...</button>
    <div class="wb-dropdown">
      <button class="wb-avatar wb-avatar-sm" data-wb-toggle="dropdown">JD</button>
      <div class="wb-dropdown-menu">
        <a href="#" class="wb-dropdown-item">Profilim</a>
        <a href="#" class="wb-dropdown-item">Ayarlar</a>
        <div class="wb-dropdown-divider"></div>
        <a href="/logout" class="wb-dropdown-item wb-dropdown-item-danger">Çıkış yap</a>
      </div>
    </div>
  </div>
</header>

Araç Çubuğu

Sayfa düzeyindeki eylemler için yatay çubuk — genellikle sayfa başlığı ile içerik tablosu arasına yerleştirilir.

<div class="wb-toolbar">
  <div class="wb-toolbar-start">
    <h2 class="wb-toolbar-title">Kullanıcılar <span class="wb-badge">248</span></h2>
  </div>
  <div class="wb-toolbar-end">
    <button class="wb-btn wb-btn-outline wb-btn-sm">Dışa aktar</button>
    <button class="wb-btn wb-btn-primary wb-btn-sm">+ Yeni kullanıcı</button>
  </div>
</div>

<!-- Toplu işlem çubuğu (satırlar seçildiğinde gösterilir) -->
<div class="wb-toolbar wb-toolbar-bulk">
  <span>3 seçildi</span>
  <button class="wb-btn wb-btn-danger wb-btn-sm">Seçilenleri sil</button>
</div>

Komut Paleti

Cmd+K / Ctrl+K ile tetiklenen tam ekran arama/komut katmanı. Bir kez kaydedin; WebBlocks klavye, arama ve gezinmeyi yönetir.

<!-- HTML -->
<div class="wb-cmd-backdrop" id="my-cmd">
  <div class="wb-cmd-dialog">
    <div class="wb-cmd-header">
      <svg class="wb-cmd-search-icon">...</svg>
      <input type="text" class="wb-cmd-input" placeholder="Ara veya komut gir…">
      <kbd class="wb-cmd-esc">Esc</kbd>
    </div>
    <div class="wb-cmd-results">
      <div class="wb-cmd-group">
        <div class="wb-cmd-group-label">Sayfalar</div>
        <a href="/dashboard" class="wb-cmd-result">Dashboard</a>
        <a href="/users"     class="wb-cmd-result">Kullanıcılar</a>
        <a href="/settings"  class="wb-cmd-result">Ayarlar</a>
      </div>
    </div>
  </div>
</div>

<!-- JS -->
<script>
WBCommandPalette.register('#my-cmd');
</script>

Tam register() seçenekleri (özellikle onSearch) için JavaScript API sayfasına bakın.