Build a Dark Mode Sidebar Menu for Web Apps

Welcome to this tutorial on Build a Dark Mode Sidebar Menu for Web Apps. This is an automatically generated post based on popular examples to help you learn and implement this concept.

HTML Structure

Here is the basic HTML structure for this project:

<div class="dark-layout">
  <aside class="dark-sidebar">
    <div class="brand">
      <div class="brand-icon"></div>
      <h2>DarkAdmin</h2>
    </div>
    <ul class="nav-list">
      <li class="active"><a href="#"><i class="fas fa-th-large"></i> Dashboard</a></li>
      <li><a href="#"><i class="fas fa-chart-bar"></i> Analytics</a></li>
      <li><a href="#"><i class="fas fa-envelope"></i> Messages</a></li>
      <li><a href="#"><i class="fas fa-folder"></i> Projects</a></li>
    </ul>
    <div class="sidebar-footer">
      <a href="#"><i class="fas fa-sign-out-alt"></i> Logout</a>
    </div>
  </aside>
  <main class="dark-content">
    <header>
      <h1>Dashboard Overview</h1>
    </header>
    <div class="content-cards">
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
    </div>
  </main>
</div>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

CSS Styling

Style your component using the following CSS:

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&display=swap');

body {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  background-color: #0f172a;
  color: #f8fafc;
}

.dark-layout {
  display: flex;
  height: 100vh;
}

.dark-sidebar {
  width: 260px;
  background: #1e293b;
  border-right: 1px solid #334155;
  display: flex;
  flex-direction: column;
}

.brand {
  padding: 30px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid #334155;
}

.brand-icon {
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 8px;
}

.brand h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(to right, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-list {
  list-style: none;
  padding: 20px 10px;
  margin: 0;
  flex: 1;
}

.nav-list li {
  margin-bottom: 8px;
}

.nav-list a {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 20px;
  color: #94a3b8;
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.nav-list a:hover, .nav-list li.active a {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.nav-list a i {
  font-size: 18px;
}

.sidebar-footer {
  padding: 20px;
  border-top: 1px solid #334155;
}

.sidebar-footer a {
  color: #ef4444;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  transition: 0.3s;
}

.sidebar-footer a:hover {
  color: #f87171;
}

.dark-content {
  flex: 1;
  padding: 40px;
}

.dark-content header h1 {
  margin-top: 0;
  font-weight: 500;
}

.content-cards {
  display: flex;
  gap: 20px;
  margin-top: 30px;
}

.card {
  height: 120px;
  flex: 1;
  background: #1e293b;
  border-radius: 15px;
  border: 1px solid #334155;
}

JavaScript Logic (if applicable)

For dynamic behavior, you can use the following JavaScript snippet:

document.addEventListener('DOMContentLoaded', () => {
  const navItems = document.querySelectorAll('.nav-list li');
  navItems.forEach(item => {
    item.addEventListener('click', function(e) {
      e.preventDefault();
      navItems.forEach(nav => nav.classList.remove('active'));
      this.classList.add('active');
    });
  });
});

Feel free to customize this code for your own projects!