Dashboard

Welcome back! Here’s an overview of your projects.

Total Revenue

$45,231.89

20.1%

from last month

Active Users

2,300

15.3%

from last month

Conversion Rate

4.24%

2.1%

from last month

No reports generated yet

Get started by creating a new report. All your generated documents will appear here.

En yaygın olarak modern SaaS uygulamalarında ve Yönetici Kontrol Panellerinde kullanılan, sol kenar çubuğunu ve üst başlığı birleştiren temel düzen.

Kullanım Durumları ve Özellikler

Yönetim ekranı/SaaS ürünü: Birçok gezinme öğesi içeren uygulamalar için idealdir.
Duyarlı Uyumluluk: Masaüstünde her zaman görüntülenen kenar çubuğu, mobil ve tablet ekranlarında gizlenecek şekilde tasarlanmıştır (gerçek çalışmada hamburger menüsü vb. içeren bir çekmecede görüntülenir).
Flexbox düzeni: “flex-1” ve “min-w-0” gibi yardımcı programları birleştirerek tam ekran yüksekliğine sığacak şekilde hesaplanan bir yapı. Yalnızca ana içerik alanı kaydırılır, başlık ve kenar çubuğu sabitlenir.

Tasarım ve UX’in önemli noktaları (Tasarım ve UX)

Kaydırma alanı ayrımı: Soldaki gezinme (“yan” içindeki “nav”) ve sağdaki ana içeriğin kaydırılması (“ana”) bağımsızdır, bu nedenle uzun menüler bile ana ekranı etkilemez.
Özel kaydırma çubuğu: Varsayılan kalın kaydırma çubuğunu, kullanıcı arayüzü gürültüsünü azaltan daha ince, daha şık bir tasarıma değiştirmek için ::-webkit-scrollbar kullanıyoruz.
Son derece görünür hiyerarşik yapı: Arka plan renkleri (bg-slate-50 ve bg-white), kenarlıklar (border-slate-200) ve açık gölgeler (shadow-sm) birleştirilerek her bölümün sınırları doğal bir şekilde ifade edilir.

Nasıl kişiselleştirilir (Özelleştirme Kılavuzu)

Kenar çubuğu genişliği: “Aside”da belirtilen “w-64” (16rem = 256px) değerini “w-72” veya “w-56” olarak değiştirerek genişliği ayarlayabilirsiniz.
Başlık yüksekliği: Kenar çubuğunun üst kısmındaki ‘başlık’ı ve logo alanını ‘h-16’dan (4rem = 64 piksel) ‘h-14’e vb. değiştirerek genel yüksekliği kontrol edebilirsiniz.
Tema rengini değiştirin: Lütfen her simgede ve aktif menüde kullanılan “indigo-600” vb.‘yi marka renginizle değiştirin (ör. “mavi-600” veya “mor-500”).

uygulama kodu (Implementation)

<div class="h-screen w-full overflow-hidden bg-slate-50 text-slate-900 font-sans flex">
<!-- kenar çubuğu -->
<aside class="hidden md:flex flex-col w-64 bg-white border-r border-slate-200 shrink-0">
  <div class="h-16 flex items-center px-6 border-b border-slate-200 shrink-0">
    <a href="#" class="font-bold text-lg text-indigo-600">NexusApp</a>
  </div>
  
  <nav class="flex-1 overflow-y-auto py-4 px-3">
    <ul class="space-y-1">
      <li>
        <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg bg-indigo-50 text-indigo-600">
          Dashboard
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-50">
          Team
        </a>
      </li>
    </ul>
  </nav>
</aside>

<!-- Ana konteyner -->
<div class="flex-1 flex flex-col min-w-0 bg-slate-50">
  <!-- Başlık -->
  <header class="h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 bg-white border-b border-slate-200 shadow-sm shrink-0">
    <div class="flex items-center gap-4">
      <!-- Mobil cihazlar için menü geçişi -->
      <button class="md:hidden p-2 text-slate-500 hover:text-slate-900 rounded-md">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
      </button>
    </div>
    
    <div class="flex items-center gap-4">
      <button class="p-2 text-slate-400 hover:text-slate-600 rounded-full">
        <!-- Notification icons, etc. -->
      </button>
      <div class="h-8 w-8 rounded-full bg-indigo-500 text-white flex items-center justify-center text-sm font-bold">
        JS
      </div>
    </div>
  </header>
  
  <!-- Main content area -->
  <main class="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
    <div class="max-w-7xl mx-auto">
      <!-- Place page-specific content here -->
      <h1 class="text-2xl font-bold text-slate-900 mb-6">Dashboard</h1>
    </div>
  </main>
</div>
</div>

Tarayıcı Desteği

Modern tarayıcıların (Chrome, Safari, Firefox, Edge) en son sürümleriyle doğru şekilde çalışır.
Flexbox (“flex”, “flex-1”, “flex-col”) yoğun olarak kullanıldığından eski tarayıcılar (IE vb.) desteklenmez.