Sidebar

<style>
  .sidebar {
    width: 230px;

    header {
      display: flex;
      align-items: center;
      gap: var(--ui-spacing-3);
    }

    section > menu {
      padding-top: var(--ui-spacing-2);
    }

    details {
      border-bottom: 0;
      padding-inline: var(--ui-spacing-3);

      summary {
        padding-block: var(--ui-spacing-2);
      }

      menu {
        border-left: 1px solid var(--ui-neutral-200);
        margin-left: var(--ui-spacing-2);
        margin-block: 0 var(--ui-spacing-4);
        padding-block: 0;
        padding-left: var(--ui-spacing-1);
      }
    }

    li {
      position: relative;

      button.square {
        position: absolute;
        right: 0;
        width: revert;

        @media (hover: hover) {
          opacity: 0;
        }
      }

      &:hover,
      &:has([popover]:popover-open) {
        button.square {
          opacity: 1;
        }
      }
    }

    .sidebar-user {
      text-align: left;
      width: 100%;
    }
  }
</style>

<nav class="sidebar">
  <header>
    <img
      src="https://api.dicebear.com/9.x/icons/svg?seed=Emery"
      width="32"
      height="32"
      alt="avatar"
    />
    <div style="display: grid">
      <strong>Acme Inc</strong>
      <small>Enterprise</small>
    </div>
  </header>

  <section>
    <menu>
      <li><small>Platform</small></li>
      <li>
        <details open>
          <summary>
            <span style="display: flex; align-items: center; gap: 0.5rem">
              <svg><!-- terminal-2 --></svg>
              Playground
            </span>
          </summary>
          <menu class="sidebar-submenu">
            <li><button class="ghost">History</button></li>
            <li><button class="ghost">Starred</button></li>
            <li><button class="ghost">Settings</button></li>
          </menu>
        </details>
      </li>
      <li>
        <button class="ghost">
          <svg><!-- search --></svg> Models
        </button>
      </li>
      <li>
        <button class="ghost">
          <svg><!-- books --></svg> Documentation
        </button>
      </li>
      <li>
        <button class="ghost">
          <svg><!-- settings --></svg> Settings
        </button>
      </li>
    </menu>
  </section>

  <section>
    <menu>
      <li><small>Projects</small></li>
      <li>
        <button class="ghost">
          <svg><!-- layout-grid --></svg> Design Engineering
        </button>
        <button class="ghost square" popovertarget="de-menu">
          <svg><!-- dots --></svg>
        </button>
        <div id="de-menu" popover data-placement="right top">
          <menu>
            <li>
              <button class="ghost">
                <svg><!-- eye --></svg> View
              </button>
            </li>
            <li>
              <button class="ghost">
                <svg><!-- share --></svg> Share
              </button>
            </li>
            <li><hr /></li>
            <li>
              <button class="ghost destructive">
                <svg><!-- trash --></svg> Delete
              </button>
            </li>
          </menu>
        </div>
      </li>
      <li>
        <button class="ghost">
          <svg><!-- trending-up --></svg> Sales &amp; Marketing
        </button>
        <button class="ghost square" popovertarget="sm-menu">
          <svg><!-- dots --></svg>
        </button>
        <div id="sm-menu" popover data-placement="right top">
          <menu>
            <li>
              <button class="ghost">
                <svg><!-- eye --></svg> View
              </button>
            </li>
            <li>
              <button class="ghost">
                <svg><!-- share --></svg> Share
              </button>
            </li>
            <li><hr /></li>
            <li>
              <button class="ghost destructive">
                <svg><!-- trash --></svg> Delete
              </button>
            </li>
          </menu>
        </div>
      </li>
      <li>
        <button class="ghost">
          <svg><!-- plane --></svg> Travel
        </button>
        <button class="ghost square" popovertarget="travel-menu">
          <svg><!-- dots --></svg>
        </button>
        <div id="travel-menu" popover data-placement="right top">
          <menu>
            <li>
              <button class="ghost">
                <svg><!-- eye --></svg> View
              </button>
            </li>
            <li>
              <button class="ghost">
                <svg><!-- share --></svg> Share
              </button>
            </li>
            <li><hr /></li>
            <li>
              <button class="ghost destructive">
                <svg><!-- trash --></svg> Delete
              </button>
            </li>
          </menu>
        </div>
      </li>
      <li>
        <button class="ghost">
          <svg><!-- dots --></svg> More
        </button>
      </li>
    </menu>
  </section>

  <hr />

  <footer>
    <menu>
      <li>
        <small>
          <button class="ghost">
            <svg><!-- lifebuoy --></svg> Support
          </button>
        </small>
      </li>
      <li>
        <small>
          <button class="ghost">
            <svg><!-- message --></svg> Feedback
          </button>
        </small>
      </li>
    </menu>
    <hr />
    <button class="ghost sidebar-user" popovertarget="user-menu">
      <img src="avatar.png" width="26" height="26" alt="" />
      <div style="display: grid">
        <strong>miles</strong>
        <small>m@example.com</small>
      </div>
      <svg><!-- selector --></svg>
    </button>
    <div id="user-menu" popover data-placement="right bottom">
      <menu>
        <li
          style="
            display: flex;
            align-items: center;
            gap: var(--ui-spacing-3);
            padding: var(--ui-spacing-2) var(--ui-spacing-3);
          "
        >
          <img src="avatar.png" width="32" height="32" alt="" />
          <div style="display: grid">
            <strong>miles</strong>
            <small>m@example.com</small>
          </div>
        </li>
        <li><hr /></li>
        <li>
          <button class="ghost" style="color: var(--ui-color2-600)">
            <svg><!-- sparkles --></svg> Upgrade to Pro
          </button>
        </li>
        <li><hr /></li>
        <li>
          <button class="ghost">
            <svg><!-- user-circle --></svg> Account
          </button>
        </li>
        <li>
          <button class="ghost">
            <svg><!-- credit-card --></svg> Billing
          </button>
        </li>
        <li>
          <button class="ghost">
            <svg><!-- bell --></svg> Notifications
          </button>
        </li>
        <li><hr /></li>
        <li>
          <button class="ghost destructive">
            <svg><!-- logout --></svg> Log out
          </button>
        </li>
      </menu>
    </div>
  </footer>
</nav>