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.

Tata letak dasar yang menggabungkan sidebar kiri dan header atas, paling umum digunakan dalam aplikasi SaaS modern dan Dasbor Admin.

Kasus & Fitur Penggunaan

Layar manajemen/produk SaaS: Ideal untuk aplikasi dengan banyak item navigasi.
Kompatibilitas Responsif: Sidebar yang selalu ditampilkan di desktop dirancang untuk disembunyikan di layar ponsel dan tablet (dalam pengoperasian sebenarnya, ditampilkan di laci dengan menu hamburger, dll.).
Tata letak Flexbox: Struktur yang dihitung agar sesuai dengan tinggi layar penuh dengan menggabungkan utilitas seperti flex-1 dan min-w-0. Hanya area konten utama yang bergulir, header dan sidebar diperbaiki.

Poin-poin penting dari desain dan UX (Desain & UX)

Pemisahan area gulir: Navigasi di sebelah kiri (nav dalam aside) dan pengguliran konten utama (main) di sebelah kanan bersifat independen, sehingga menu yang panjang pun tidak mengganggu layar utama.
Bilah gulir khusus: Kami menggunakan ::-webkit-scrollbar untuk mengubah bilah gulir tebal default menjadi desain yang lebih tipis dan ramping yang mengurangi kebisingan UI.
Struktur hierarki yang sangat terlihat: Dengan menggabungkan warna latar belakang (bg-slate-50 dan bg-white), batas (border-slate-200), dan bayangan terang (shadow-sm), batas setiap bagian diekspresikan secara alami.

Cara menyesuaikan (Panduan Kustomisasi)

Lebar sidebar: Anda dapat menyesuaikan lebar dengan mengubah w-64 (16rem = 256px) yang ditentukan di aside menjadi w-72 atau w-56.
Tinggi header: Anda dapat mengontrol tinggi keseluruhan dengan mengubah header dan area logo di bagian atas sidebar dari h-16 (4rem = 64px) menjadi h-14, dll.
Ubah warna tema: Harap ganti indigo-600 dll. yang digunakan di setiap ikon dan menu aktif dengan warna merek Anda (misalnya blue-600 atau violet-500).

kode implementasi (Implementation)

<div class="h-screen w-full overflow-hidden bg-slate-50 text-slate-900 font-sans flex">
<!-- bilah sisi -->
<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>

<!-- Wadah utama -->
<div class="flex-1 flex flex-col min-w-0 bg-slate-50">
  <!-- Tajuk -->
  <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">
      <!-- Menu beralih untuk seluler -->
      <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>

Dukungan Peramban

Bekerja dengan benar dengan versi terbaru browser modern (Chrome, Safari, Firefox, Edge).
Browser lama (IE, dll.) tidak didukung karena Flexbox (flex, flex-1, flex-col) banyak digunakan.