89 lines
3.5 KiB
Twig
89 lines
3.5 KiB
Twig
<nav {{ attributes }} class="flex w-64 h-screen flex-col justify-between bg-cyan-950">
|
|
<div class="px-4 py-6">
|
|
<ul class="mt-6 space-y-1">
|
|
<li>
|
|
<a
|
|
href="#"
|
|
class="block rounded-lg
|
|
bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60
|
|
px-4 py-2 text-sm font-medium text-gray-50"
|
|
>
|
|
Dashboard
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<details class="group [&_summary::-webkit-details-marker]:hidden">
|
|
<summary
|
|
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-50 hover:bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60"
|
|
>
|
|
<span class="text-sm font-medium"> Downloads </span>
|
|
|
|
<span class="shrink-0 transition duration-300 group-open:-rotate-180">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="size-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</summary>
|
|
|
|
<ul class="mt-2 space-y-1 px-4">
|
|
<li>
|
|
<a
|
|
href="#"
|
|
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700"
|
|
>
|
|
In Progress
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="#"
|
|
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700"
|
|
>
|
|
Complete
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</details>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="#"
|
|
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700"
|
|
>
|
|
Preferences
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="sticky inset-x-0 bottom-0 border-t border-gray-100">
|
|
<a href="#" class="flex items-center gap-2 bg-white p-4 hover:bg-gray-50">
|
|
<img
|
|
alt=""
|
|
src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80"
|
|
class="size-10 rounded-full object-cover"
|
|
/>
|
|
|
|
<div>
|
|
<p class="text-xs">
|
|
<strong class="block font-medium">Eric Frusciante</strong>
|
|
|
|
<span> eric@frusciante.com </span>
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</nav>
|