Component Deep Dive #6: Sidebar Nav — The Standard Layout for Admin Panels

<div style="display:flex; min-height:400px">
  <div style="width:220px; background:#1a1a2e; padding:20px 0; display:flex; flex-direction:column; gap:2px">
    <div style="padding:18px 24px; color:#e94560; font-weight:bold; border-left:3px solid #e94560; background:rgba(233,69,96,0.1)">Dashboard</div>
    <div style="padding:18px 24px; color:#aaa; cursor:pointer; border-left:3px solid transparent">Analytics</div>
    <div style="padding:18px 24px; color:#aaa; cursor:pointer; border-left:3px solid transparent">Users</div>
  </div>
  <div style="flex:1; padding:40px; background:#fff">
    <h2>Main Content</h2>
  </div>
</div>

.sidebar-item {
  padding: 18px 24px;
  color: #aaa;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}
.sidebar-item.active {
  color: #e94560;
  font-weight: bold;
  border-left-color: #e94560;
  background: rgba(233,69,96,0.1);
}

document.querySelectorAll('.sidebar-item').forEach(function(item) {
  item.addEventListener('click', function() {
    document.querySelectorAll('.sidebar-item').forEach(function(i) {
      i.classList.remove('active');
    });
    this.classList.add('active');
  });
});

(function() {
  var current = location.pathname;
  document.querySelectorAll('.sidebar-item[href]').forEach(function(item) {
    if (item.getAttribute('href') === current) {
      item.classList.add('active');
    }
  });
})();

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -220px;
    top: 0;
    bottom: 0;
    z-index: 999;
    transition: left 0.3s ease;
  }
  .sidebar.open { left: 0; }
}