:root {
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 70px;
}

body {
  padding-left: var(--sidebar-width);
  transition: padding-left 0.3s;
}

body.sidebar-collapsed {
  padding-left: var(--sidebar-collapsed-width);
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: #1e293b;
  color: #e2e8f0;
  transition: width 0.3s;
  overflow-y: auto;
  z-index: 1030;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar.collapsed.logo-text,
.sidebar.collapsed.nav-link span {
  display: none;
}

.sidebar.collapsed.nav-link {
  justify-content: center;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  height: 60px;
  border-bottom: 1px solid #334155;
}

.sidebar.nav-link {
  color: #e2e8f0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar.nav-link:hover,
.sidebar.nav-link.active {
  background: #334155;
  color: #fff;
}

.sidebar.nav-link small {
  font-size: 14px;
}

.sidebar.collapse.nav-link {
  padding-left: 32px;
}

@media (max-width: 768px) {
  body {
    padding-left: 0;
  }
}
### 3. JS - `sidebar.js`
document.addEventListener('DOMContentLoaded', () => {
  const sidebar = document.getElementById('sidebar');
  const toggleBtn = document.getElementById('sidebarToggle');
  const body = document.body;

  // Toggle collapse
  toggleBtn.addEventListener('click', () => {
    sidebar.classList.toggle('collapsed');
    body.classList.toggle('sidebar-collapsed');

    // Ganti icon arrow
    const icon = toggleBtn.querySelector('i');
    icon.classList.toggle('bi-chevron-left');
    icon.classList.toggle('bi-chevron-right');

    localStorage.setItem('sidebarCollapsed', sidebar.classList.contains('collapsed'));
  });

  // Load state dari localStorage
  if (localStorage.getItem('sidebarCollapsed') === 'true') {
    sidebar.classList.add('collapsed');
    body.classList.add('sidebar-collapsed');
    toggleBtn.querySelector('i').classList.replace('bi-chevron-left', 'bi-chevron-right');
  }

  // Set active menu
  const currentPath = window.location.pathname.split('/').pop() + window.location.hash;
  document.querySelectorAll('.nav-link').forEach(link => {
    if (link.getAttribute('href') === currentPath ||
        link.getAttribute('href') === currentPath.split('#')[0]) {
      link.classList.add('active');

      // Buka collapse parent kalau ada
      const collapse = link.closest('.collapse');
      if (collapse) {
        new bootstrap.Collapse(collapse, { show: true });
      }
    }
  });
});