Membangun Dashboard Admin Modern & Responsif dengan HTML, CSS, & JavaScript

Membangun Dashboard Admin Modern & Responsif dengan HTML, CSS, & JavaScript

Membangun Dashboard Admin Modern & Responsif dengan HTML, CSS, & JavaScript

Novian Hidayat
2025-05-10

Pelajari cara membuat antarmuka dashboard admin yang bersih, modern, dan berfungsi baik di semua perangkat. Panduan langkah demi langkah untuk pemula menggunakan HTML5, CSS3 (Flexbox/Grid), dan JavaScript dasar.

Membangun Dashboard Admin Modern & Responsif dari Nol: Panduan HTML, CSS, & JS

Selamat datang di tutorial pembuatan dashboard admin! Jika Anda sudah familiar dengan dasar HTML dan CSS, dan ingin melangkah lebih jauh untuk membuat antarmuka yang lebih kompleks seperti panel admin, panduan ini cocok untuk Anda. Kita akan fokus pada pembuatan tampilan depan (front-end) dashboard yang responsif dan modern.

Apa itu Dashboard Admin?

Dashboard admin adalah antarmuka pengguna grafis (GUI) yang memungkinkan administrator atau pengguna dengan hak akses tertentu untuk mengelola, memantau, dan mengontrol berbagai aspek dari sebuah aplikasi atau website. Biasanya berisi visualisasi data, tabel, formulir, dan navigasi untuk berbagai modul.

Mengapa Responsif dan Modern?

  • Responsif: Admin mungkin perlu mengakses dashboard dari berbagai perangkat (desktop, tablet, bahkan ponsel saat darurat). Tampilan yang responsif memastikan pengalaman pengguna yang konsisten.
  • Modern: Desain yang bersih, intuitif, dan menarik secara visual meningkatkan efisiensi dan kenyamanan pengguna. Penggunaan whitespace, tipografi yang baik, dan ikonografi yang jelas adalah kuncinya.

Apa yang Akan Kita Buat?

Kita akan membuat kerangka dasar dashboard admin dengan komponen berikut:

  1. Sidebar Navigasi Tetap (Fixed Sidebar): Untuk menu utama.
  2. Header/Top Bar: Berisi judul halaman, pencarian, notifikasi, dan profil pengguna.
  3. Area Konten Utama: Tempat menampilkan statistik, tabel, formulir, dll.
    • Kita akan membuat contoh kartu statistik (Stat Cards).
    • Kita akan membuat contoh tabel data sederhana.
  4. Desain Responsif: Sidebar akan collapsible (bisa disembunyikan/ditampilkan) di layar kecil.

Prasyarat

  • Text Editor: VS Code, Sublime Text, dll.
  • Web Browser: Chrome, Firefox, dll.
  • Pemahaman Dasar HTML, CSS: Familiaritas dengan tag HTML, selector CSS, Flexbox atau Grid akan sangat membantu.
  • Sedikit Pengetahuan JavaScript: Untuk interaksi dasar seperti toggle menu.
  • (Opsional tapi Direkomendasikan) Ikon: Kita akan menggunakan Font Awesome untuk ikon. Anda bisa menambahkannya via CDN.

Mari kita mulai membangun!

Langkah 1: Persiapan Proyek dan Struktur Folder

Sama seperti sebelumnya, organisasi adalah kunci.

  1. Buat folder utama proyek, misalnya proyek-dashboard-admin.
  2. Di dalamnya, buat:
    • index.html
    • style.css
    • script.js (untuk kode JavaScript kita)
    • Folder images (jika Anda memiliki logo atau gambar profil).
    • Folder css (opsional, jika Anda ingin style.css di dalamnya).
    • Folder js (opsional, jika Anda ingin script.js di dalamnya).

Struktur dasar:

proyek-dashboard-admin/
├── index.html
├── style.css
├── script.js
└── images/
    └── (logo.png, avatar.jpg, dll.)

Langkah 2: Struktur Dasar HTML (index.html)

Buka index.html dan ketikkan kerangka HTML5 dasar. Kita juga akan menyertakan link Font Awesome via CDN.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard - SolusiHebat</title>
    <link rel="stylesheet" href="style.css">
    <!-- Font Awesome CDN (ganti dengan versi terbaru jika perlu) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- Google Fonts (Opsional) -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="dashboard-container">
        <!-- Sidebar akan di sini -->
        
        <!-- Main Content Wrapper (Header + Content Area) akan di sini -->
    </div>

    <script src="script.js"></script>
</body>
</html>

Penjelasan:

  • dashboard-container: Wrapper utama yang akan menggunakan Flexbox untuk menata sidebar dan konten utama.
  • Font Awesome: Untuk ikon yang mudah digunakan. Anda bisa mencari ikon di fontawesome.com/icons.
  • Google Fonts: Roboto adalah pilihan font yang bersih dan modern untuk dashboard.

Langkah 3: Membangun Sidebar Navigasi

Sidebar adalah tempat menu utama aplikasi.

Tambahkan kode berikut di dalam <div class="dashboard-container">:

<!-- Di dalam <div class="dashboard-container"> -->
<aside class="sidebar">
    <div class="sidebar-header">
        <!-- <img src="images/logo.png" alt="Logo" class="logo"> -->
        <h2 class="logo-text">SolusiHebat</h2>
    </div>
    <nav class="sidebar-nav">
        <ul>
            <li><a href="#" class="active"><i class="fas fa-tachometer-alt"></i> <span>Dashboard</span></a></li>
            <li><a href="#"><i class="fas fa-users"></i> <span>Pengguna</span></a></li>
            <li><a href="#"><i class="fas fa-box-open"></i> <span>Produk</span></a></li>
            <li><a href="#"><i class="fas fa-shopping-cart"></i> <span>Pesanan</span></a></li>
            <li><a href="#"><i class="fas fa-chart-bar"></i> <span>Laporan</span></a></li>
            <li><a href="#"><i class="fas fa-cog"></i> <span>Pengaturan</span></a></li>
        </ul>
    </nav>
    <div class="sidebar-footer">
        <a href="#"><i class="fas fa-sign-out-alt"></i> <span>Logout</span></a>
    </div>
</aside>
<!-- Main Content Wrapper setelah ini -->

Penjelasan:

  • <aside class="sidebar">: Tag semantik untuk konten samping.
  • .sidebar-header: Untuk logo atau nama aplikasi.
  • .sidebar-nav ul li a: Struktur menu standar.
    • <i class="fas fa-..."></i>: Ikon dari Font Awesome. fas berarti Font Awesome Solid.
    • <span>: Untuk teks menu, agar bisa di-styling terpisah atau disembunyikan jika sidebar diperkecil (mode ikon saja).
    • class="active": Menandakan halaman/menu yang sedang aktif.
  • .sidebar-footer: Untuk link logout atau info tambahan.

Langkah 4: Membangun Main Content Wrapper (Header/Top Bar dan Area Konten)

Ini adalah area di sebelah kanan sidebar.

Tambahkan kode berikut setelah tag penutup </aside> (sidebar):

<!-- Di dalam <div class="dashboard-container">, SETELAH </aside> -->
<div class="main-wrapper">
    <header class="top-bar">
        <div class="top-bar-left">
            <button class="sidebar-toggle" id="sidebarToggle"><i class="fas fa-bars"></i></button>
            <h1 class="page-title">Dashboard Utama</h1>
        </div>
        <div class="top-bar-right">
            <div class="search-bar">
                <input type="text" placeholder="Cari...">
                <button><i class="fas fa-search"></i></button>
            </div>
            <a href="#" class="icon-button" aria-label="Notifikasi">
                <i class="fas fa-bell"></i>
                <span class="badge">3</span>
            </a>
            <div class="user-profile">
                <img src="images/avatar-placeholder.png" alt="Avatar Pengguna" class="avatar"> <!-- Ganti dengan gambar avatar Anda -->
                <span>Admin User</span>
                <i class="fas fa-chevron-down"></i> <!-- Untuk dropdown user -->
            </div>
        </div>
    </header>

    <main class="main-content">
        <!-- Konten Dashboard akan di sini -->
    </main>
</div>

Penjelasan:

  • <div class="main-wrapper">: Membungkus header dan area konten utama.
  • <header class="top-bar">: Header horizontal di atas konten.
    • .sidebar-toggle: Tombol untuk membuka/menutup sidebar di tampilan mobile (akan kita fungsikan dengan JS).
    • .page-title: Judul halaman saat ini.
    • .search-bar, .icon-button (untuk notifikasi), .user-profile: Komponen umum di top bar.
    • .badge: Untuk angka notifikasi.
  • <main class="main-content">: Area utama tempat konten dashboard (kartu, tabel, grafik, dll.) akan ditampilkan.

Langkah 5: Mengisi Area Konten Utama (main-content)

Mari tambahkan beberapa contoh konten: kartu statistik dan tabel.

Tambahkan kode berikut di dalam <main class="main-content">:

<!-- Di dalam <main class="main-content"> -->
<section class="stats-cards">
    <article class="stat-card">
        <div class="stat-card-icon blue"><i class="fas fa-users"></i></div>
        <div class="stat-card-info">
            <p>Total Pengguna</p>
            <h3>1,250</h3>
        </div>
    </article>
    <article class="stat-card">
        <div class="stat-card-icon green"><i class="fas fa-shopping-cart"></i></div>
        <div class="stat-card-info">
            <p>Pesanan Baru</p>
            <h3>350</h3>
        </div>
    </article>
    <article class="stat-card">
        <div class="stat-card-icon orange"><i class="fas fa-dollar-sign"></i></div>
        <div class="stat-card-info">
            <p>Pendapatan Bulan Ini</p>
            <h3>Rp 15.000.000</h3>
        </div>
    </article>
    <article class="stat-card">
        <div class="stat-card-icon red"><i class="fas fa-exclamation-triangle"></i></div>
        <div class="stat-card-info">
            <p>Tiket Terbuka</p>
            <h3>12</h3>
        </div>
    </article>
</section>

<section class="data-table-section">
    <h2>Daftar Pengguna Terbaru</h2>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Nama</th>
                    <th>Email</th>
                    <th>Peran</th>
                    <th>Tanggal Daftar</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Budi Santoso</td>
                    <td>budi.s@example.com</td>
                    <td>Admin</td>
                    <td>2024-05-01</td>
                    <td><a href="#" class="action-btn edit"><i class="fas fa-edit"></i></a> <a href="#" class="action-btn delete"><i class="fas fa-trash"></i></a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Citra Lestari</td>
                    <td>citra.l@example.com</td>
                    <td>Editor</td>
                    <td>2024-05-03</td>
                    <td><a href="#" class="action-btn edit"><i class="fas fa-edit"></i></a> <a href="#" class="action-btn delete"><i class="fas fa-trash"></i></a></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Agus Wijaya</td>
                    <td>agus.w@example.com</td>
                    <td>Viewer</td>
                    <td>2024-05-05</td>
                    <td><a href="#" class="action-btn edit"><i class="fas fa-edit"></i></a> <a href="#" class="action-btn delete"><i class="fas fa-trash"></i></a></td>
                </tr>
                <!-- Tambahkan lebih banyak baris data dummy -->
            </tbody>
        </table>
    </div>
</section>

Penjelasan:

  • .stats-cards: Kontainer untuk kartu-kartu statistik. Kita akan menggunakan Flexbox atau Grid untuk menatanya.
  • .stat-card: Setiap kartu individual.
  • .data-table-section: Bagian untuk menampilkan tabel data.
  • .table-container: Untuk membuat tabel bisa di-scroll horizontal jika terlalu lebar.
  • <table>, <thead>, <tbody>, <tr>, <th>, <td>: Tag HTML standar untuk tabel.
  • .action-btn: Untuk tombol aksi di tabel.

Sekarang, struktur HTML dasar kita sudah selesai! File index.html akan terlihat cukup panjang, tapi terorganisir.

Langkah 6: Styling Dasar dengan CSS (style.css)

Buka style.css. Kita akan mulai dengan reset, variabel, dan gaya global.

/* style.css */

/* 0. Import Font (jika menggunakan Google Fonts) */
/* (Sudah di-link di HTML, tapi bisa juga @import di sini) */
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); */

/* 1. Variabel CSS */
:root {
    --primary-color: #4A90E2; /* Biru modern */
    --secondary-color: #50E3C2; /* Mint/Turquoise */
    --accent-color: #F5A623; /* Oranye */
    --text-color: #4A4A4A;
    --text-light: #9B9B9B;
    --bg-color: #F7F8FC; /* Latar belakang utama dashboard */
    --sidebar-bg: #FFFFFF;
    --sidebar-text: #4A4A4A;
    --sidebar-active-bg: #E9F2FC;
    --sidebar-active-text: var(--primary-color);
    --top-bar-bg: #FFFFFF;
    --card-bg: #FFFFFF;
    --border-color: #E0E0E0;
    --shadow-light: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-medium: 0 4px 12px rgba(0,0,0,0.1);

    --font-family: 'Roboto', sans-serif;
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 80px; /* Lebar sidebar saat hanya ikon */
    --top-bar-height: 70px;
    --border-radius: 8px;
}

/* 2. Reset Dasar & Gaya Global */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    font-size: 16px; /* Default font size */
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: var(--primary-color);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 3. Layout Utama Dashboard */
.dashboard-container {
    display: flex;
    min-height: 100vh;
}

.main-wrapper {
    flex-grow: 1; /* Mengisi sisa ruang */
    display: flex;
    flex-direction: column;
    transition: margin-left 0.3s ease-in-out; /* Untuk animasi saat sidebar toggle */
}

.main-content {
    flex-grow: 1;
    padding: 25px;
    overflow-y: auto; /* Jika konten lebih panjang dari layar */
}

Langkah 7: Styling Sidebar

/* 4. Styling Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed; /* Membuat sidebar tetap */
    left: 0;
    top: 0;
    height: 100vh;
    box-shadow: var(--shadow-light);
    transition: width 0.3s ease-in-out, transform 0.3s ease-in-out; /* Untuk animasi collapse/expand */
    z-index: 1000; /* Di atas konten lain */
}

.sidebar-header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    height: var(--top-bar-height); /* Samakan dengan tinggi top-bar */
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-header .logo {
    max-height: 40px;
    margin-right: 10px;
}
.sidebar-header .logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.sidebar-nav {
    flex-grow: 1; /* Menu mengisi ruang tersedia */
    padding: 20px 0;
    overflow-y: auto; /* Scroll jika menu panjang */
}

.sidebar-nav ul li a {
    display: flex;
    align-items: center;
    padding: 12px 25px; /* Padding untuk link menu */
    color: var(--sidebar-text);
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap; /* Mencegah teks menu wrap saat sidebar mengecil */
    overflow: hidden; /* Sembunyikan teks yang meluber saat mengecil */
}

.sidebar-nav ul li a i {
    font-size: 1.1rem;
    margin-right: 15px;
    width: 20px; /* Jaga alignment ikon */
    text-align: center;
    transition: margin-right 0.3s ease-in-out;
}

.sidebar-nav ul li a span {
    transition: opacity 0.3s ease-in-out;
}

.sidebar-nav ul li a:hover {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
}

.sidebar-nav ul li a.active {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    border-left: 3px solid var(--primary-color); /* Indikator aktif */
    padding-left: 22px; /* Ausgleich für border-left */
}

.sidebar-footer {
    padding: 20px 25px;
    border-top: 1px solid var(--border-color);
}
.sidebar-footer a {
    display: flex;
    align-items: center;
    color: var(--sidebar-text);
    font-weight: 500;
}
.sidebar-footer a:hover {
    color: var(--primary-color);
}
.sidebar-footer a i {
    margin-right: 15px;
}


/* Styling untuk Sidebar Collapsed (akan di-toggle dengan JS) */
.sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
}
.sidebar.collapsed .logo-text {
    display: none; /* Sembunyikan teks logo */
}
.sidebar.collapsed .sidebar-header .logo {
    margin-right: 0; /* Hapus margin jika hanya logo */
}
.sidebar.collapsed .sidebar-nav ul li a span,
.sidebar.collapsed .sidebar-footer a span {
    opacity: 0;
    width: 0;
    /* display: none; tidak bisa dianimasi, jadi pakai opacity dan width */
}
.sidebar.collapsed .sidebar-nav ul li a i {
    margin-right: 0; /* Hapus margin ikon */
}
.sidebar.collapsed .sidebar-nav ul li a,
.sidebar.collapsed .sidebar-footer a {
    justify-content: center; /* Ikon di tengah saat collapsed */
    padding: 12px 10px;
}
.sidebar.collapsed .sidebar-nav ul li a.active {
    padding-left: 7px; /* Sesuaikan untuk border aktif */
}

PENTING: Agar sidebar tidak menimpa konten utama, kita perlu memberi margin-left pada .main-wrapper sebesar lebar sidebar. Tambahkan ini di CSS Anda:

/* Sesuaikan .main-wrapper agar tidak tertutup sidebar fixed */
.main-wrapper {
    /* ... (properti lain yang sudah ada) ... */
    margin-left: var(--sidebar-width); /* Default margin */
}

/* Saat sidebar collapsed, kurangi margin-left main-wrapper */
.sidebar.collapsed + .main-wrapper { /* Menggunakan adjacent sibling selector */
    margin-left: var(--sidebar-width-collapsed);
}

Langkah 8: Styling Top Bar / Header

/* 5. Styling Top Bar */
.top-bar {
    height: var(--top-bar-height);
    background-color: var(--top-bar-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-light);
    position: sticky; /* Membuat top-bar tetap di atas saat konten di-scroll */
    top: 0;
    z-index: 900; /* Di bawah sidebar tapi di atas konten utama */
}

.top-bar-left, .top-bar-right {
    display: flex;
    align-items: center;
}

.sidebar-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-color);
    cursor: pointer;
    margin-right: 20px;
    display: none; /* Sembunyikan di desktop, tampilkan di mobile */
}

.page-title {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
}

.search-bar {
    display: flex;
    align-items: center;
    margin-right: 20px;
}
.search-bar input {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    font-size: 0.9rem;
    outline: none;
}
.search-bar input:focus {
    border-color: var(--primary-color);
}
.search-bar button {
    padding: 8px 12px;
    background-color: var(--primary-color);
    color: white;
    border: 1px solid var(--primary-color);
    border-left: none;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    cursor: pointer;
}
.search-bar button:hover {
    background-color: darken(var(--primary-color), 10%); /* Ganti manual #357ABD */
}

.icon-button {
    font-size: 1.3rem;
    color: var(--text-light);
    margin-right: 20px;
    position: relative; /* Untuk badge */
}
.icon-button:hover {
    color: var(--text-color);
}
.badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: var(--accent-color);
    color: white;
    font-size: 0.7rem;
    padding: 2px 5px;
    border-radius: 50%;
    font-weight: bold;
}

.user-profile {
    display: flex;
    align-items: center;
    cursor: pointer; /* Indikasi bisa diklik untuk dropdown */
}
.user-profile .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
    border: 2px solid var(--border-color);
}
.user-profile span {
    font-weight: 500;
    font-size: 0.9rem;
    margin-right: 5px;
}
.user-profile i.fa-chevron-down {
    font-size: 0.8rem;
    color: var(--text-light);
}

Langkah 9: Styling Konten Utama (Kartu Statistik & Tabel)

/* 6. Styling Main Content Area */
.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Responsif */
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background-color: var(--card-bg);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    display: flex;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.stat-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin-right: 20px;
}
.stat-card-icon.blue { background-color: var(--primary-color); }
.stat-card-icon.green { background-color: var(--secondary-color); }
.stat-card-icon.orange { background-color: var(--accent-color); }
.stat-card-icon.red { background-color: #E94E77; /* Warna merah custom */ }

.stat-card-info p {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}
.stat-card-info h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0;
}

.data-table-section {
    background-color: var(--card-bg);
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
}
.data-table-section h2 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: 500;
}

.table-container {
    overflow-x: auto; /* Scroll horizontal untuk tabel lebar */
}

table {
    width: 100%;
    border-collapse: collapse; /* Hilangkan spasi antar border sel */
    font-size: 0.9rem;
}

table th, table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

table thead th {
    background-color: #F9FAFB; /* Latar header tabel sedikit beda */
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    font-size: 0.8rem;
}

table tbody tr:hover {
    background-color: #F5F6F9; /* Efek hover pada baris */
}

.action-btn {
    font-size: 0.9rem;
    padding: 5px;
    margin-right: 5px;
    border-radius: 4px;
    color: white;
}
.action-btn.edit { background-color: var(--primary-color); }
.action-btn.edit:hover { background-color: darken(var(--primary-color),10%); } /* #357ABD */
.action-btn.delete { background-color: #E94E77; }
.action-btn.delete:hover { background-color: darken(#E94E77, 10%); } /* #D33A60 */

Langkah 10: JavaScript untuk Interaktivitas (Toggle Sidebar)

Buka script.js dan tambahkan kode untuk meng-handle klik pada tombol toggle sidebar.

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const sidebar = document.querySelector('.sidebar');
    const sidebarToggle = document.getElementById('sidebarToggle');
    // const mainWrapper = document.querySelector('.main-wrapper'); // Tidak perlu jika pakai adjacent sibling selector

    if (sidebarToggle) {
        sidebarToggle.addEventListener('click', () => {
            sidebar.classList.toggle('collapsed');
            
            // Opsional: Simpan state sidebar di localStorage
            if (sidebar.classList.contains('collapsed')) {
                localStorage.setItem('sidebarCollapsed', 'true');
            } else {
                localStorage.setItem('sidebarCollapsed', 'false');
            }
        });
    }

    // Opsional: Muat state sidebar dari localStorage saat halaman dimuat
    if (localStorage.getItem('sidebarCollapsed') === 'true') {
        sidebar.classList.add('collapsed');
    }

    // (Opsional) Highlight link aktif di sidebar berdasarkan URL
    // Ini adalah contoh sederhana, mungkin perlu disesuaikan
    const currentPath = window.location.pathname.split("/").pop() || "index.html"; // Dapatkan nama file saat ini
    const navLinks = document.querySelectorAll('.sidebar-nav a');
    
    navLinks.forEach(link => {
        // Hapus kelas active dari semua link dulu (jika ada yang ter-hardcode)
        // link.classList.remove('active'); // Sebaiknya di-handle server-side atau logic lebih canggih

        const linkPath = link.getAttribute('href').split("/").pop();
        if (linkPath === currentPath || (currentPath === "index.html" && (linkPath === "#" || link.querySelector('span').textContent.toLowerCase() === 'dashboard'))) {
             // Untuk link '#' di index.html, atau yang text-nya Dashboard
            // link.classList.add('active'); // Ini akan meng-override class .active dari HTML jika tidak hati-hati
        }
    });

});

Penjelasan JS:

  • Menunggu DOM siap (DOMContentLoaded).
  • Mengambil elemen sidebar dan tombol toggle.
  • Menambahkan event listener pada tombol:
    • Saat diklik, ia akan menambah/menghapus kelas collapsed pada elemen sidebar.
    • CSS yang sudah kita tulis untuk .sidebar.collapsed akan otomatis diterapkan.
  • Opsional: Menyimpan dan memuat status sidebar (collapsed/expanded) menggunakan localStorage agar pilihan pengguna diingat antar sesi/refresh.
  • Opsional (dasar): Menyorot link aktif. Ini bisa jadi rumit di sisi klien saja, idealnya status aktif dikirim dari server atau menggunakan router jika ini Single Page Application (SPA).

Langkah 11: Membuat Dashboard Responsif (Media Queries)

Terakhir, tambahkan media queries di akhir style.css untuk menyesuaikan tampilan di layar yang lebih kecil.

/* 7. Media Queries untuk Responsivitas */

/* Tablet (misal, <= 992px) */
@media (max-width: 992px) {
    :root {
        /* Sedikit sesuaikan lebar sidebar jika perlu */
        /* --sidebar-width: 220px; */
        /* --sidebar-width-collapsed: 70px; */
    }
    .stats-cards {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .top-bar .search-bar {
        display: none; /* Sembunyikan search bar di tablet untuk hemat ruang */
    }
}

/* Mobile (misal, <= 768px) */
@media (max-width: 768px) {
    .sidebar {
        /* Di mobile, sidebar awalnya tersembunyi di luar layar */
        transform: translateX(-100%);
        box-shadow: var(--shadow-medium); /* Bayangan lebih jelas saat overlay */
    }
    .sidebar.collapsed {
        /* Saat 'collapsed' (yang kita gunakan untuk toggle di mobile), tampilkan */
        transform: translateX(0);
        width: var(--sidebar-width); /* Lebar normal saat tampil di mobile */
    }
    .sidebar.collapsed .logo-text,
    .sidebar.collapsed .sidebar-nav ul li a span,
    .sidebar.collapsed .sidebar-footer a span {
        opacity: 1; /* Tampilkan kembali teks menu */
        width: auto;
    }
    .sidebar.collapsed .sidebar-nav ul li a i {
        margin-right: 15px; /* Kembalikan margin ikon */
    }
    .sidebar.collapsed .sidebar-nav ul li a,
    .sidebar.collapsed .sidebar-footer a {
        justify-content: flex-start; /* Alignment normal */
    }
     /* Overlay untuk konten saat sidebar mobile aktif */
    /* Ini bisa ditambahkan/dihapus dengan JS juga */
    /* .dashboard-overlay.active {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 999;
    } */


    .main-wrapper {
        margin-left: 0 !important; /* Main wrapper ambil full width */
    }
    
    .sidebar-toggle {
        display: block; /* Tampilkan tombol burger */
    }

    .top-bar {
        padding: 0 15px;
    }
    .page-title {
        font-size: 1.2rem;
    }
    .top-bar-right .user-profile span {
        display: none; /* Sembunyikan nama user di mobile, hanya avatar */
    }
    .top-bar-right .icon-button {
        margin-right: 15px;
    }

    .main-content {
        padding: 15px;
    }
    .stats-cards {
        grid-template-columns: 1fr; /* Satu kartu per baris di mobile */
    }
    .stat-card {
        padding: 15px;
    }
    .stat-card-info h3 {
        font-size: 1.5rem;
    }
    .data-table-section {
        padding: 15px;
    }
    .data-table-section h2 {
        font-size: 1.1rem;
    }
}

/* Layar sangat kecil (opsional) */
@media (max-width: 480px) {
    .stat-card {
        flex-direction: column; /* Ikon di atas, info di bawah */
        text-align: center;
    }
    .stat-card-icon {
        margin-right: 0;
        margin-bottom: 10px;
    }
    .top-bar-right .icon-button { /* Sembunyikan notif jika terlalu sempit */
        /* display: none; */
    }
}

Perubahan Logika Sidebar di Mobile:

  • Di mobile, kita tidak menggunakan state “collapsed” untuk sidebar versi mini, melainkan untuk menampilkan/menyembunyikan sidebar secara keseluruhan.
  • Awalnya sidebar di transform: translateX(-100%) (di luar layar).
  • Saat tombol toggle diklik, kelas collapsed ditambahkan ke sidebar (kita “menyalahgunakan” kelas ini untuk mobile).
  • CSS untuk .sidebar.collapsed di media query mobile akan membuatnya transform: translateX(0) (masuk ke layar) dan mengatur ulang style agar teks menu terlihat.

Untuk overlay saat sidebar mobile aktif (agar bisa klik di luar sidebar untuk menutup), Anda perlu menambahkan elemen overlay di HTML dan mengontrolnya dengan JS. Ini sedikit lebih advance, jadi saya komentari.

Kesimpulan dan Langkah Selanjutnya

Selamat! Anda telah membangun kerangka dasar dashboard admin yang modern dan responsif. Ini adalah fondasi yang bagus untuk proyek backend yang lebih besar.

Apa yang telah dipelajari:

  • Struktur HTML untuk layout dashboard (sidebar, header, content).
  • Styling dengan CSS Flexbox/Grid, variabel CSS, dan desain modern.
  • Penggunaan Font Awesome untuk ikon.
  • JavaScript dasar untuk toggle sidebar.
  • Media queries untuk membuat dashboard responsif.

Langkah Selanjutnya:

  1. Kustomisasi Lebih Lanjut: Ubah tema warna, font, dan layout sesuai selera.
  2. Komponen UI Tambahan: Tambahkan formulir, grafik (misalnya dengan Chart.js), modal, dropdown, dll.
  3. JavaScript Lebih Mendalam:
    • Buat dropdown user di top bar berfungsi.
    • Implementasikan fungsi pencarian (filter tabel, dll.).
    • Validasi formulir.
    • Ambil dan tampilkan data dinamis menggunakan fetch API jika Anda sudah memiliki backend API.
  4. Optimasi: Pastikan performa baik, terutama jika ada banyak data atau grafik.
  5. Framework/Library: Untuk proyek yang lebih besar, pertimbangkan menggunakan framework front-end seperti React, Vue, atau Angular, atau framework CSS seperti Bootstrap/Tailwind CSS yang sudah memiliki banyak komponen UI siap pakai.

Teruslah bereksperimen dan belajar. Membuat dashboard adalah cara yang bagus untuk mengasah keterampilan front-end Anda. Semoga berhasil!

Tutorial Terkait