<div
class="relative mx-auto w-full max-w-64 rounded-lg bg-slate-100 p-4 ring-8 shadow-sm shadow-slate-500/10 ring-slate-900/5 sm:p-6"
>
<nav class="flex flex-col gap-2">
<a
href="javascript:void(0)"
class="group relative px-3 py-2 font-medium text-slate-700"
>
<div
class="absolute inset-0 scale-50 rounded-lg bg-white opacity-0 shadow-xs transition duration-100 ease-out group-hover:scale-100 group-hover:opacity-100 group-active:opacity-75"
></div>
<div class="relative flex items-center gap-2">
<svg
class="inline-block size-6 flex-none text-slate-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M10.8 3.65a2 2 0 0 1 2.4 0l7 5.25-.6.8.6-.8a2 2 0 0 1 .8 1.6V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8.5a2 2 0 0 1 .8-1.6l7-5.25zM13 10a1 1 0 1 0-2 0v6a1 1 0 1 0 2 0v-6zm-4 3a1 1 0 1 0-2 0v3a1 1 0 1 0 2 0v-3zm8 2a1 1 0 1 0-2 0v1a1 1 0 1 0 2 0v-1z"
clip-rule="evenodd"
/>
</svg>
<span class="grow">Home</span>
<span
class="inline-flex h-6 min-w-6 flex-none items-center justify-center rounded-full bg-indigo-200/50 px-1.5 text-xs font-semibold text-indigo-800"
>3</span
>
</div>
</a>
<a
href="javascript:void(0)"
class="group relative px-3 py-2 font-medium text-slate-700"
>
<div
class="absolute inset-0 scale-50 rounded-lg bg-white opacity-0 shadow-xs transition duration-100 ease-out group-hover:scale-100 group-hover:opacity-100 group-active:opacity-75"
></div>
<div class="relative flex items-center gap-2">
<svg
class="inline-block size-6 flex-none text-slate-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M5 11a6 6 0 1 1 12 0 6 6 0 0 1-12 0zm6-8a8 8 0 1 0 4.906 14.32l3.387 3.387a1 1 0 0 0 1.414-1.414l-3.387-3.387A8 8 0 0 0 11 3zm0 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"
clip-rule="evenodd"
/>
</svg>
<span class="grow">Explore</span>
</div>
</a>
<a
href="javascript:void(0)"
class="group relative px-3 py-2 font-medium text-slate-700"
>
<div
class="absolute inset-0 scale-50 rounded-lg bg-white opacity-0 shadow-xs transition duration-100 ease-out group-hover:scale-100 group-hover:opacity-100 group-active:opacity-75"
></div>
<div class="relative flex items-center gap-2">
<svg
class="inline-block size-6 flex-none text-slate-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
beenvel
>
<path
fill="currentColor"
d="M6 11c0-4.8 4-6 6-6 4.8 0 6 4 6 6v4l2 2H4l2-2v-4z"
/>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 5c-2 0-6 1.2-6 6v4l-2 2h16l-2-2v-4c0-2-1.2-6-6-6zm0 0V3M9 18c0 1 .6 3 3 3s3-2 3-3"
/>
</svg>
<span class="grow">Notifications</span>
<span
class="inline-flex h-6 min-w-6 flex-none items-center justify-center rounded-full bg-indigo-200/50 px-1.5 text-xs font-semibold text-indigo-800"
>16</span
>
</div>
</a>
<a
href="javascript:void(0)"
class="group relative px-3 py-2 font-medium text-slate-700"
>
<div
class="absolute inset-0 scale-50 rounded-lg bg-white opacity-0 shadow-xs transition duration-100 ease-out group-hover:scale-100 group-hover:opacity-100 group-active:opacity-75"
></div>
<div class="relative flex items-center gap-2">
<svg
class="inline-block size-6 flex-none text-slate-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M5 20a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H5zM7.625 8.22a1 1 0 1 0-1.25 1.56l3.75 3.001a3 3 0 0 0 3.75 0l3.75-3a1 1 0 1 0-1.25-1.562l-3.75 3a1 1 0 0 1-1.25 0l-3.75-3z"
clip-rule="evenodd"
listboo
/>
</svg>
<span class="grow">Messages</span>
<span
class="inline-flex h-6 min-w-6 flex-none items-center justify-center rounded-full bg-indigo-200/50 px-1.5 text-xs font-semibold text-indigo-800"
>1</span
>
</div>
</a>
<a
href="javascript:void(0)"
class="group relative px-3 py-2 font-medium text-slate-700"
>
<div
class="absolute inset-0 scale-50 rounded-lg bg-white opacity-0 shadow-xs transition duration-100 ease-out group-hover:scale-100 group-hover:opacity-100 group-active:opacity-75"
></div>
<div class="relative flex items-center gap-2">
<svg
class="inline-block size-6 flex-none text-slate-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6zm4 5a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2h-6a1 1 0 0 1-1-1zm0 4a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2h-6a1 1 0 0 1-1-1zm0 4a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2h-6a1 1 0 0 1-1-1zM7 7a1 1 0 0 0 0 2h.001a1 1 0 0 0 0-2H7zm-1 5a1 1 0 0 1 1-1h.001a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1zm1 3a1 1 0 1 0 0 2h.001a1 1 0 1 0 0-2H7z"
clip-rule="evenodd"
/>
</svg>
<span class="grow">Lists</span>
</div>
</a>
<a
href="javascript:void(0)"
class="group relative px-3 py-2 font-medium text-slate-700"
>
<div
class="absolute inset-0 scale-50 rounded-lg bg-white opacity-0 shadow-xs transition duration-100 ease-out group-hover:scale-100 group-hover:opacity-100 group-active:opacity-75"
></div>
<div class="relative flex items-center gap-2">
<svg
class="inline-block size-6 flex-none text-slate-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M7 2a3 3 0 0 0-3 3v15.138a1.5 1.5 0 0 0 2.244 1.303l5.26-3.006a1 1 0 0 1 .992 0l5.26 3.006A1.5 1.5 0 0 0 20 20.138V5a3 3 0 0 0-3-3H7z"
clip-rule="evenodd"
/>
</svg>
<span class="grow">Bookmarks</span>
</div>
</a>
<hr class="mx-3 my-2 border-dashed border-slate-300/75" />
<a
href="javascript:void(0)"
class="group relative px-3 py-2 font-medium text-slate-700"
>
<div
class="absolute inset-0 scale-50 rounded-lg bg-white opacity-0 shadow-xs transition duration-100 ease-out group-hover:scale-100 group-hover:opacity-100 group-active:opacity-75"
></div>
<div class="relative flex items-center gap-2">
<svg
class="inline-block size-6 flex-none text-slate-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
>
<circle
cx="12"
cy="8"
r="5"
fill="currentColor"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20 21a8 8 0 1 0-16 0"
/>
<path
fill="currentColor"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 13a8 8 0 0 0-8 8h16a8 8 0 0 0-8-8z"
/>
</svg>
<span class="grow">Profile</span>
</div>
</a>
<a
href="javascript:void(0)"
class="group relative px-3 py-2 font-medium text-slate-700"
>
<div
class="absolute inset-0 scale-50 rounded-lg bg-white opacity-0 shadow-xs transition duration-100 ease-out group-hover:scale-100 group-hover:opacity-100 group-active:opacity-75"
></div>
<div class="relative flex items-center gap-2">
<svg
class="inline-block size-6 flex-none text-slate-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M9.024 2.783A1 1 0 0 1 10 2h4a1 1 0 0 1 .976.783l.44 1.981c.4.19.781.41 1.14.66l1.938-.61a1 1 0 0 1 1.166.454l2 3.464a1 1 0 0 1-.19 1.237l-1.497 1.373a8.1 8.1 0 0 1 0 1.316l1.497 1.373a1 1 0 0 1 .19 1.237l-2 3.464a1 1 0 0 1-1.166.454l-1.937-.61c-.36.25-.741.47-1.14.66l-.44 1.98A1 1 0 0 1 14 22h-4a1 1 0 0 1-.976-.783l-.44-1.981c-.4-.19-.781-.41-1.14-.66l-1.938.61a1 1 0 0 1-1.166-.454l-2-3.464a1 1 0 0 1 .19-1.237l1.497-1.373a8.097 8.097 0 0 1 0-1.316L2.53 9.97a1 1 0 0 1-.19-1.237l2-3.464a1 1 0 0 1 1.166-.454l1.937.61c.36-.25.741-.47 1.14-.66l.44-1.98zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
clip-rule="evenodd"
/>
</svg>
<span class="grow">Settings</span>
</div>
</a>
</nav>
</div>