Sidebar Tree

<div class="nuda-tree">
  <div class="nuda-tree__group is-open">
    <button class="nuda-tree__head">
      <svg class="nuda-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>
      Documents
    </button>
    <div class="nuda-tree__items">
      <div>
        <button>Spec.md</button>
        <button>Roadmap.md</button>
        <button>Notes.md</button>
      </div>
    </div>
  </div>
</div>

document.querySelectorAll('.nuda-tree__head').forEach(head => {
  head.addEventListener('click', () => {
    head.parentElement.classList.toggle('is-open');
  });
});

.nuda-tree {
  padding: 8px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  width: 200px;
}

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

.nuda-tree__head:hover {
  background: rgba(255,255,255,.04);
}

.nuda-tree__chev {
  width: 12px;
  height: 12px;
  color: #a0a0a8;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}

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

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

.nuda-tree__group.is-open .nuda-tree__items {
  grid-template-rows: 1fr;
}

.nuda-tree__items > * {
  overflow: hidden;
  min-height: 0;
}

.nuda-tree__items button {
  display: block;
  width: 100%;
  padding: 5px 10px 5px 28px;
  background: transparent;
  border: 0;
  color: #a0a0a8;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s,color .2s,padding-left .25s;
}

.nuda-tree__items button:hover {
  background: rgba(228,255,84,.08);
  color: #e4ff54;
  padding-left: 32px;
}