Nested Collapsible Tree

<div class="nuda-sb2-nested-tree">
  <ul class="nuda-sb2-nested-tree__list">
    <li><a href="#" class="nuda-sb2-nested-tree__leaf">Overview</a></li>
    <li class="nuda-sb2-nested-tree__group is-open">
      <button type="button" class="nuda-sb2-nested-tree__trigger"
              aria-expanded="true" aria-controls="sb2nt-project">
        <svg class="nuda-sb2-nested-tree__chev" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M9 6l6 6-6 6" />
        </svg>
        Project
      </button>
      <div class="nuda-sb2-nested-tree__panel" id="sb2nt-project">
        <div class="nuda-sb2-nested-tree__inner">
          <ul class="nuda-sb2-nested-tree__list nuda-sb2-nested-tree__list--nested">
            <li><a href="#" class="nuda-sb2-nested-tree__leaf">Tasks</a></li>
            <!-- Nested group follows the same trigger/panel pattern -->
          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>

document.querySelectorAll('.nuda-sb2-nested-tree__trigger').forEach((trigger) => {
  trigger.addEventListener('click', () => {
    const group = trigger.closest('.nuda-sb2-nested-tree__group');
    const open = group.classList.toggle('is-open');
    trigger.setAttribute('aria-expanded', String(open));
  });
});

.nuda-sb2-nested-tree {
  width: 220px;
  padding: 8px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  font-size: 12px;
}

.nuda-sb2-nested-tree__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nuda-sb2-nested-tree__list--nested {
  padding-left: 18px;
}

.nuda-sb2-nested-tree__leaf {
  display: block;
  padding: 8px 10px;
  min-height: 20px;
  border-radius: 8px;
  color: #a0a0a8;
  text-decoration: none;
  transition: background .2s,color .2s;
}

.nuda-sb2-nested-tree__leaf:hover {
  background: rgba(255,255,255,.05);
  color: #fafafa;
}

.nuda-sb2-nested-tree__leaf[aria-current="page"] {
  color: #e4ff54;
  background: rgba(228,255,84,.08);
}

.nuda-sb2-nested-tree__leaf:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

.nuda-sb2-nested-tree__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  color: #fafafa;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s;
}

.nuda-sb2-nested-tree__trigger:hover {
  background: rgba(255,255,255,.05);
}

.nuda-sb2-nested-tree__trigger:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

.nuda-sb2-nested-tree__chev {
  width: 12px;
  height: 12px;
  color: #777;
  flex-shrink: 0;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}

.nuda-sb2-nested-tree__group.is-open > .nuda-sb2-nested-tree__trigger .nuda-sb2-nested-tree__chev {
  transform: rotate(90deg);
}

.nuda-sb2-nested-tree__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.16,1,.3,1);
}

.nuda-sb2-nested-tree__group.is-open > .nuda-sb2-nested-tree__panel {
  grid-template-rows: 1fr;
}

.nuda-sb2-nested-tree__inner {
  overflow: hidden;
  min-height: 0;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-sb2-nested-tree__chev,.nuda-sb2-nested-tree__panel {
    transition: none;
  }
}