<div class="Tree-view">
      <div class="Tree-branch">
        <div class="Tree-leaf Cursor-pointer">
          <div class="Tree-leaf--content">
            <i class="Tree-leaf--icon fa-envelope fa-solid"></i>
            <div class="Tree-leaf--label">All Mail</div>
          </div>
        </div>
      </div>
      <div class="Tree-branch">
        <div class="Tree-leaf Cursor-pointer">
          <div class="Tree-leaf--content">
            <i class="Tree-leaf--icon fa-solid fa-trash"></i>
            <div class="Tree-leaf--label">Trash</div>
          </div>
        </div>
      </div>
      <div class="Tree-branch">
        <div class="Tree-chevron"><i class="gg-chevron-down"></i></div>
        <div class="Tree-leaf Cursor-pointer" style="margin-left: -20px;">
          <div class="Tree-leaf--content">
            <i class="Tree-leaf--icon fa-folder fa-solid"></i>
            <div class="Tree-leaf--label">Categories</div>
          </div>
        </div>
      </div>
      <div class="Tree-trunk Scrollbar Expanded" style="max-height: 350px; overflow-y: auto;">
        <div class="Tree-branch">
          <div class="Tree-leaf Cursor-pointer">
            <div class="Tree-leaf--content">
              <i class="Tree-leaf--icon fa-solid fa-user-group"></i>
              <div class="Tree-leaf--label">Social</div>
              <div class="Tree-leaf--caption">13</div>
            </div>
          </div>
        </div>
        <div class="Tree-branch">
          <div class="Tree-leaf Cursor-pointer">
            <div class="Tree-leaf--content">
              <i class="Tree-leaf--icon fa-circle-info fa-solid"></i>
              <div class="Tree-leaf--label">Updates</div>
              <div class="Tree-leaf--caption">2,666</div>
            </div>
          </div>
        </div>
        <div class="Tree-branch">
          <div class="Tree-leaf Cursor-pointer">
            <div class="Tree-leaf--content">
              <i class="Tree-leaf--icon fa-comments fa-solid"></i>
              <div class="Tree-leaf--label">Forums</div>
              <div class="Tree-leaf--caption">5,366</div>
            </div>
          </div>
        </div>
        <div class="Tree-branch">
          <div class="Tree-leaf Cursor-pointer">
            <div class="Tree-leaf--content">
              <i class="Tree-leaf--icon fa-solid fa-tag"></i>
              <div class="Tree-leaf--label">Promotions</div>
              <div class="Tree-leaf--caption">842</div>
            </div>
          </div>
        </div>
      </div>
      <div class="Tree-branch">
        <div class="Tree-leaf Cursor-pointer">
          <div class="Tree-leaf--content">
            <i class="Tree-leaf--icon fa-folder fa-solid"></i>
            <div class="Tree-leaf--label">History</div>
          </div>
        </div>
      </div>
    </div>