Two-Level Sidebar

<!-- Two visible levels: a parent link, then its children always shown and indented by a border guide. -->
<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">
  <nav aria-label="Sidebar">
    <ul class="flex flex-col gap-3">
      <li>
        <a href="/settings" class="flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-semibold text-gray-900 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-100 dark:hover:bg-gray-800">
          <svg class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="3"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2"/></svg>
          Settings
        </a>
        <ul class="mt-1 ml-5 flex flex-col gap-0.5 border-l border-gray-200 pl-3 dark:border-gray-700">
          <li><a href="/settings/general" class="block rounded-md px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 aria-[current=page]:font-medium aria-[current=page]:text-blue-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:aria-[current=page]:text-blue-300">General</a></li>
          <li><a href="/settings/team" aria-current="page" class="block rounded-md px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 aria-[current=page]:font-medium aria-[current=page]:text-blue-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:aria-[current=page]:text-blue-300">Team</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</aside>