Workspace Switcher Sidebar

<!-- Toggle open state on the button (aria-expanded) and show/hide the menu it controls. -->
<aside class="flex w-64 flex-col gap-4 border-r border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
  <div class="relative">
    <button type="button" aria-expanded="false" aria-controls="ws-menu" aria-haspopup="menu" class="flex w-full items-center gap-2.5 rounded-md border border-gray-200 p-2 text-left hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:hover:bg-gray-800">
      <span class="grid h-8 w-8 shrink-0 place-items-center rounded-md bg-indigo-500 text-sm font-semibold text-white" aria-hidden="true">A</span>
      <span class="min-w-0 flex-1">
        <span class="block truncate text-sm font-semibold text-gray-900 dark:text-gray-100">Acme Inc</span>
        <span class="block truncate text-xs text-gray-500 dark:text-gray-400">Free plan</span>
      </span>
      <svg class="h-4 w-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M8 9l4-4 4 4M8 15l4 4 4-4"/></svg>
    </button>
    <ul id="ws-menu" role="menu" hidden class="absolute left-0 right-0 top-full z-10 mt-1 rounded-md border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-800">
      <li role="none"><button role="menuitemradio" aria-checked="true" type="button" class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm text-gray-900 hover:bg-gray-100 dark:text-gray-100 dark:hover:bg-gray-700">Acme Inc</button></li>
      <li role="none"><button role="menuitemradio" aria-checked="false" type="button" class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm text-gray-900 hover:bg-gray-100 dark:text-gray-100 dark:hover:bg-gray-700">Globex</button></li>
    </ul>
  </div>
  <nav aria-label="Sidebar">
    <ul class="flex flex-col gap-0.5">
      <li><a href="/dashboard" aria-current="page" class="block rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 aria-[current=page]:bg-blue-50 aria-[current=page]:text-blue-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:aria-[current=page]:bg-blue-900 dark:aria-[current=page]:text-blue-200">Dashboard</a></li>
    </ul>
  </nav>
</aside>