Sidebar Nav

<aside class="flex h-full w-64 flex-col gap-1 border-r border-border bg-card p-4">
<a href="/" class="mb-4 flex items-center gap-2 px-2 py-2">
  <span class="h-8 w-8 rounded-lg bg-brand"></span>
  <span class="text-base font-semibold text-foreground">Sinapse</span>
</a>
<p class="px-3 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">Workspace</p>
<nav class="mb-4 flex flex-col gap-0.5">
  <a href="/dashboard" aria-current="page" class="flex items-center gap-2.5 rounded-xl bg-accent px-3 py-2 text-sm font-medium text-foreground">
    <i class="ti ti-layout-dashboard" style="font-size:18px"></i> Dashboard
  </a>
  <a href="/projetos" class="flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm text-muted-foreground hover:bg-muted hover:text-foreground">
    <i class="ti ti-folder" style="font-size:18px"></i> Projetos
  </a>
  <a href="/equipes" class="flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm text-muted-foreground hover:bg-muted hover:text-foreground">
    <i class="ti ti-users-group" style="font-size:18px"></i> Equipes
  </a>
</nav>
<p class="px-3 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">Conta</p>
<nav class="flex flex-col gap-0.5">
  <a href="/settings" class="flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm text-muted-foreground hover:bg-muted hover:text-foreground">
    <i class="ti ti-settings" style="font-size:18px"></i> Configurações
  </a>
</nav>
<div class="mt-auto flex items-center gap-3 rounded-xl border border-border p-3">
  <span class="flex h-8 w-8 items-center justify-center rounded-full bg-secondary-default text-xs font-semibold text-secondary-default">JL</span>
  <div class="flex min-w-0 flex-col">
    <span class="truncate text-sm font-medium text-foreground">Janderson</span>
    <span class="truncate text-xs text-muted-foreground">[email protected]</span>
  </div>
</div>
</aside>

<aside class="flex h-full w-64 flex-col gap-1 border-r border-border bg-card p-4">…</aside>