Project Sidebar Menu in HTML, CSS, & JavaScript: Panduan Lengkap untuk Pemula

Sidebar menu adalah komponen penting dalam desain web modern. Ini tidak hanya meningkatkan navigasi pengguna tetapi juga memberikan tampilan yang rapi dan profesional. Dalam artikel ini, kita akan membahas cara membuat sidebar menu responsif menggunakan HTML, CSS, dan JavaScript. Proyek ini cocok untuk pemula yang ingin mempelajari dasar-dasar pengembangan web dan membuat komponen UI yang interaktif.

Apa Itu Sidebar Menu?

Sidebar menu adalah panel vertikal yang biasanya terletak di sisi kiri atau kanan halaman web. Ini berisi tautan navigasi, ikon, dan elemen lainnya yang membantu pengguna menjelajahi situs dengan mudah.

Fitur Sidebar Menu yang Akan Kita Buat

Responsif: Menyesuaikan tampilan di berbagai perangkat (desktop, tablet, dan mobile).
Collapsible: Bisa disempitkan (collapse) dan diperluas (expand).
Tooltip: Menampilkan teks saat sidebar disempitkan.
Icon Modern: Menggunakan ikon dari Google Fonts.

Langkah-Langkah Membuat Sidebar Menu

Berikut adalah panduan lengkap untuk membuat sidebar menu menggunakan HTML, CSS, dan JavaScript.

1. Persiapan Proyek

Buat Folder Proyek: Buat folder baru dengan nama sidebar-menu.
Buat File: Di dalam folder, buat tiga file:
- index.html
- style.css
- script.js
Siapkan Logo: Unduh logo atau gunakan logo Anda sendiri. Simpan di folder proyek dengan nama logo.png.

2. Struktur HTML

Buka file index.html dan tambahkan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sidebar Menu | Project HTML CSS JS - Azroi</title>
  <link rel="stylesheet" href="style.css">
  <!-- Menghubungkan Google Fonts untuk ikon -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0">
</head>
<body>
  <aside class="sidebar">
    <!-- Header Sidebar -->
    <header class="sidebar-header">
      <a href="#" class="header-logo">
        <img src="logo.png" alt="Logo">
      </a>
      <button class="toggler sidebar-toggler">
        <span class="material-symbols-rounded">chevron_left</span>
      </button>
      <button class="toggler menu-toggler">
        <span class="material-symbols-rounded">menu</span>
      </button>
    </header>

    <!-- Navigasi Sidebar -->
    <nav class="sidebar-nav">
      <!-- Navigasi Utama -->
      <ul class="nav-list primary-nav">
        <li class="nav-item">
          <a href="#" class="nav-link">
            <span class="nav-icon material-symbols-rounded">dashboard</span>
            <span class="nav-label">Dashboard</span>
          </a>
          <span class="nav-tooltip">Dashboard</span>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">
            <span class="nav-icon material-symbols-rounded">calendar_today</span>
            <span class="nav-label">Calendar</span>
          </a>
          <span class="nav-tooltip">Calendar</span>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">
            <span class="nav-icon material-symbols-rounded">notifications</span>
            <span class="nav-label">Notifications</span>
          </a>
          <span class="nav-tooltip">Notifications</span>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">
            <span class="nav-icon material-symbols-rounded">group</span>
            <span class="nav-label">Team</span>
          </a>
          <span class="nav-tooltip">Team</span>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">
            <span class="nav-icon material-symbols-rounded">insert_chart</span>
            <span class="nav-label">Analytics</span>
          </a>
          <span class="nav-tooltip">Analytics</span>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">
            <span class="nav-icon material-symbols-rounded">star</span>
            <span class="nav-label">Bookmarks</span>
          </a>
          <span class="nav-tooltip">Bookmarks</span>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">
            <span class="nav-icon material-symbols-rounded">settings</span>
            <span class="nav-label">Settings</span>
          </a>
          <span class="nav-tooltip">Settings</span>
        </li>
      </ul>

      <!-- Navigasi Sekunder -->
      <ul class="nav-list secondary-nav">
        <li class="nav-item">
          <a href="#" class="nav-link">
            <span class="nav-icon material-symbols-rounded">account_circle</span>
            <span class="nav-label">Profile</span>
          </a>
          <span class="nav-tooltip">Profile</span>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">
            <span class="nav-icon material-symbols-rounded">logout</span>
            <span class="nav-label">Logout</span>
          </a>
          <span class="nav-tooltip">Logout</span>
        </li>
      </ul>
    </nav>
  </aside>

  <!-- Menghubungkan JavaScript -->
  <script src="script.js"></script>
</body>
</html>

Run HTML

3. Styling dengan CSS

Buka file style.css dan tambahkan kode berikut:

/* Mengimpor Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  min-height: 100vh;
  background: linear-gradient(#F1FAFF, #CBE4FF);
}

.sidebar {
  position: fixed;
  width: 270px;
  margin: 16px;
  border-radius: 16px;
  background: #151A2D;
  height: calc(100vh - 32px);
  transition: all 0.4s ease;
}

.sidebar.collapsed {
  width: 85px;
}

.sidebar .sidebar-header {
  display: flex;
  position: relative;
  padding: 25px 20px;
  align-items: center;
  justify-content: space-between;
}

.sidebar-header .header-logo img {
  width: 46px;
  height: 46px;
  display: block;
  object-fit: contain;
  border-radius: 50%;
}

.sidebar-header .toggler {
  height: 35px;
  width: 35px;
  color: #151A2D;
  border: none;
  cursor: pointer;
  display: flex;
  background: #fff;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: 0.4s ease;
}

.sidebar-header .sidebar-toggler {
  position: absolute;
  right: 20px;
}

.sidebar-header .menu-toggler {
  display: none;
}

.sidebar.collapsed .sidebar-header .toggler {
  transform: translate(-4px, 65px);
}

.sidebar-header .toggler:hover {
  background: #dde4fb;
}

.sidebar-header .toggler span {
  font-size: 1.75rem;
  transition: 0.4s ease;
}

.sidebar.collapsed .sidebar-header .toggler span {
  transform: rotate(180deg);
}

.sidebar-nav .nav-list {
  list-style: none;
  display: flex;
  gap: 4px;
  padding: 0 15px;
  flex-direction: column;
  transform: translateY(15px);
  transition: 0.4s ease;
}

.sidebar.collapsed .sidebar-nav .primary-nav {
  transform: translateY(65px);
}

.sidebar-nav .nav-link {
  color: #fff;
  display: flex;
  gap: 12px;
  white-space: nowrap;
  border-radius: 8px;
  padding: 12px 15px;
  align-items: center;
  text-decoration: none;
  transition: 0.4s ease;
}

.sidebar.collapsed .sidebar-nav .nav-link {
  border-radius: 12px;
}

.sidebar .sidebar-nav .nav-link .nav-label {
  transition: opacity 0.3s ease;
}

.sidebar.collapsed .sidebar-nav .nav-link .nav-label {
  opacity: 0;
  pointer-events: none;
}

.sidebar-nav .nav-link:hover {
  color: #151A2D;
  background: #fff;
}

.sidebar-nav .nav-item {
  position: relative;
}

.sidebar-nav .nav-tooltip {
  position: absolute;
  top: -10px;
  opacity: 0;
  color: #151A2D;
  display: none;
  pointer-events: none;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  background: #fff;
  left: calc(100% + 25px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transition: 0s;
}

.sidebar.collapsed .sidebar-nav .nav-tooltip {
  display: block;
}

.sidebar-nav .nav-item:hover .nav-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(50%);
  transition: all 0.4s ease;
}

.sidebar-nav .secondary-nav {
  position: absolute;
  bottom: 30px;
  width: 100%;
}

/* Responsive untuk layar kecil */
@media (max-width: 1024px) {
  .sidebar {
    height: 56px;
    margin: 13px;
    overflow-y: hidden;
    scrollbar-width: none;
    width: calc(100% - 26px);
    max-height: calc(100vh - 26px);
  }

  .sidebar.menu-active {
    overflow-y: auto;
  }

  .sidebar .sidebar-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-radius: 16px;
    background: #151A2D;
    padding: 8px 10px;
  }

  .sidebar-header .header-logo img {
    width: 40px;
    height: 40px;
  }

  .sidebar-header .sidebar-toggler,
  .sidebar-nav .nav-item:hover .nav-tooltip {
    display: none;
  }

  .sidebar-header .menu-toggler {
    display: flex;
    height: 30px;
    width: 30px;
  }

  .sidebar-header .menu-toggler span {
    font-size: 1.3rem;
  }

  .sidebar .sidebar-nav .nav-list {
    padding: 0 10px;
  }

  .sidebar-nav .nav-link {
    gap: 10px;
    padding: 10px;
    font-size: 0.94rem;
  }

  .sidebar-nav .nav-link .nav-icon {
    font-size: 1.37rem;
  }

  .sidebar-nav .secondary-nav {
    position: relative;
    bottom: 0;
    margin: 40px 0 30px;
  }
}

4. Menambahkan JavaScript

Buka file script.js dan tambahkan kode berikut:

const sidebar = document.querySelector(".sidebar");
const sidebarToggler = document.querySelector(".sidebar-toggler");
const menuToggler = document.querySelector(".menu-toggler");

// Toggle sidebar's collapsed state
sidebarToggler.addEventListener("click", () => {
  sidebar.classList.toggle("collapsed");
});

// Toggle menu-active class and adjust height
menuToggler.addEventListener("click", () => {
  sidebar.classList.toggle("menu-active");
  if (sidebar.classList.contains("menu-active")) {
    sidebar.style.height = `${sidebar.scrollHeight}px`;
    menuToggler.querySelector("span").innerText = "close";
  } else {
    sidebar.style.height = "56px";
    menuToggler.querySelector("span").innerText = "menu";
  }
});

// Adjust sidebar height on window resize
window.addEventListener("resize", () => {
  if (window.innerWidth >= 1024) {
    sidebar.style.height = "calc(100vh - 32px)";
  } else {
    sidebar.classList.remove("collapsed");
    sidebar.style.height = "auto";
    if (sidebar.classList.contains("menu-active")) {
      sidebar.style.height = `${sidebar.scrollHeight}px`;
    } else {
      sidebar.style.height = "56px";
    }
  }
});

5. Menjalankan Proyek

Buka file index.html di browser Anda.
Sidebar akan muncul di sisi kiri layar.
Klik tombol toggler untuk menyempitkan atau memperluas sidebar.
Di layar kecil, sidebar akan berubah menjadi menu hamburger.

Kesimpulan

Dengan mengikuti panduan ini, Anda telah berhasil membuat sidebar menu responsif menggunakan HTML, CSS, dan JavaScript. Proyek ini adalah langkah awal yang bagus untuk mempelajari dasar-dasar pengembangan web dan membuat komponen UI yang interaktif.

Project Sidebar Menu in HTML, CSS, & JavaScript