Sidebar Collapse

<aside class="nuda-sidebar is-expanded">
  <button class="nuda-sidebar__item is-active" type="button">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 11l9-8 9 8v10a2 2 0 01-2 2h-4v-7H9v7H5a2 2 0 01-2-2V11z" />
    </svg>
    <span>Home</span>
  </button>
  <!-- More items -->
</aside>

// Toggle .is-expanded on the sidebar to collapse the labels
const sidebar = document.querySelector('.nuda-sidebar');
const toggle  = document.querySelector('[data-sidebar-toggle]');

toggle?.addEventListener('click', () => {
  sidebar.classList.toggle('is-expanded');
});

.nuda-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  width: 200px;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.nuda-sidebar:not(.is-expanded) {
  width: 54px;
}

.nuda-sidebar__item span {
  white-space: nowrap;
  transition:
    opacity 0.25s,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nuda-sidebar:not(.is-expanded) .nuda-sidebar__item span {
  opacity: 0;
  transform: translateX(-8px);
  width: 0;
}

.nuda-sidebar__item.is-active {
  background: rgba(228, 255, 84, 0.08);
  color: #e4ff54;
}