htmlcssjavascriptdashboardlayoutPemula10 mnt baca

Sidebar Dashboard

Sidebar navigasi dashboard yang bisa dibuka-tutup, lengkap dengan area konten utama.

Kenapa Sidebar?

Dashboard (panel admin, aplikasi kasir, sistem sekolah) hampir selalu memakai sidebar: menu vertikal di kiri, konten di kanan. Ini pola yang wajib dikuasai karena dipakai di dunia kerja nyata, termasuk aplikasi POS seperti kasir warung kopi.

Langkah Membangun

HTML: <aside class="sidebar"> berisi daftar menu, dan <main class="konten"> untuk isi. Bungkus keduanya dalam <div class="layout">.

CSS: Layout memakai flex: .layout { display: flex }. Sidebar punya width: 240px dan min-height: 100vh. Saat class tutup aktif, width jadi 70px (hanya ikon terlihat) dengan transition: width 0.3s agar animasinya mulus. Teks menu disembunyikan saat tertutup memakai opacity dan white-space: nowrap.

JS: Tombol toggle memanggil classList.toggle("tutup") pada sidebar. Tambahan: klik menu menandai item aktif seperti pada modul navbar.

Analogi

Sidebar seperti laci meja: dibuka saat butuh alat (menu lengkap), ditutup saat butuh ruang kerja lega (hanya ikon). Transisi CSS adalah "rel" yang membuat laci meluncur mulus, bukan melompat.

Kesalahan Umum

  • Konten utama tidak mengisi sisa lebar (beri .konten { flex: 1 }).
  • Teks menu terpotong aneh saat animasi (sembunyikan dengan overflow: hidden pada sidebar).
  • Sidebar ikut scroll bersama konten padahal seharusnya menempel (pakai position: sticky; top: 0; height: 100vh).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Kartu Statistik

Tambahkan 3 kartu statistik di area konten: "Total Produk: 120", "Transaksi Hari Ini: 45", "Omzet: Rp 1,2 jt". Buat dengan grid 3 kolom yang menjadi 1 kolom di HP.