Sidebar with User Footer

<aside class="flex h-full w-64 flex-col border-r border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
  <nav aria-label="Sidebar" class="flex-1 overflow-y-auto p-4">
    <ul class="flex flex-col gap-0.5">
      <li>
        <a href="/dashboard" aria-current="page" class="flex items-center gap-2.5 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:hover:text-gray-50 dark:aria-[current=page]:bg-blue-900 dark:aria-[current=page]:text-blue-200">
          <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"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>
          Dashboard
        </a>
      </li>
    </ul>
  </nav>
  <!-- Footer pinned by flex, not absolute, so it never overlaps the last nav item. -->
  <div class="border-t border-gray-200 p-3 dark:border-gray-800">
    <a href="/account" class="flex items-center gap-3 rounded-md p-2 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:hover:bg-gray-800">
      <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-blue-600 text-sm font-semibold text-white" aria-hidden="true">AK</span>
      <span class="min-w-0 flex-1">
        <span class="block truncate text-sm font-medium text-gray-900 dark:text-gray-100">Ada Kesh</span>
        <span class="block truncate text-xs text-gray-500 dark:text-gray-400">ada@adysre.com</span>
      </span>
    </a>
  </div>
</aside>