<div
class="relative mx-auto w-full max-w-64 rounded-lg bg-white p-6 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
>
<nav class="flex flex-col items-start gap-2">
<h3
class="mb-2 self-stretch border-b border-dashed border-slate-200 pb-2 text-sm font-semibold tracking-wider text-slate-400 uppercase"
>
Welcome
</h3>
<a
href="javascript:void(0)"
class="flex items-center gap-3 py-1.5 font-medium text-slate-950"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-house inline-block size-6 flex-none"
>
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
<path
d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
/>
</svg>
<span>Dashboard</span>
</a>
<a
href="javascript:void(0)"
class="flex items-center gap-3 py-1.5 font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-briefcase-business inline-block size-6 flex-none opacity-60"
>
<path d="M12 12h.01" />
<path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" />
<path d="M22 13a18.15 18.15 0 0 1-20 0" />
<rect width="20" height="14" x="2" y="6" rx="2" />
</svg>
<span>Projects</span>
</a>
<a
href="javascript:void(0)"
class="flex items-center gap-3 py-1.5 font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-users inline-block size-6 flex-none opacity-60"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
<span>Customers</span>
</a>
<a
href="javascript:void(0)"
class="flex items-center gap-3 py-1.5 font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-chart-line inline-block size-6 flex-none opacity-60"
>
<path d="M3 3v16a2 2 0 0 0 2 2h16" />
<path d="m19 9-5 5-4-4-3 3" />
</svg>
<span>Sales</span>
</a>
<a
href="javascript:void(0)"
class="flex items-center gap-3 py-1.5 font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-file-pen inline-block size-6 flex-none opacity-60"
>
<path d="M12.5 22H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v9.5" />
<path d="M14 2v4a2 2 0 0 0 2 2h4" />
<path
d="M13.378 15.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"
/>
</svg>
<span>Invoices</span>
</a>
<h3
class="mb-2 self-stretch border-b border-dashed border-slate-200 pt-7 pb-2 text-sm font-semibold tracking-wider text-slate-400 uppercase"
>
Account
</h3>
<a
href="javascript:void(0)"
class="flex items-center gap-3 py-1.5 font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-circle-user inline-block size-6 flex-none opacity-60"
>
<circle cx="12" cy="12" r="10" />
<circle cx="12" cy="10" r="3" />
<path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662" />
</svg>
<span>Profile</span>
</a>
<a
href="javascript:void(0)"
class="flex items-center gap-3 py-1.5 font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-user-cog inline-block size-6 flex-none opacity-60"
>
<circle cx="18" cy="15" r="3" />
<circle cx="9" cy="7" r="4" />
<path d="M10 15H6a4 4 0 0 0-4 4v2" />
<path d="m21.7 16.4-.9-.3" />
<path d="m15.2 13.9-.9-.3" />
<path d="m16.6 18.7.3-.9" />
<path d="m19.1 12.2.3-.9" />
<path d="m19.6 18.7-.4-1" />
<path d="m16.8 12.3-.4-1" />
<path d="m14.3 16.6 1-.4" />
<path d="m20.7 13.8 1-.4" />
</svg>
<span>Settings</span>
</a>
<a
href="javascript:void(0)"
class="flex items-center gap-3 py-1.5 font-medium text-slate-600 hover:border-rose-600 hover:text-slate-950"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-lock-keyhole inline-block size-6 flex-none opacity-60"
>
<circle cx="12" cy="16" r="1" />
<rect x="3" y="10" width="18" height="12" rx="2" />
<path d="M7 10V7a5 5 0 0 1 10 0v3" />
</svg>
<span>Logout</span>
</a>
</nav>
</div>