<aside
class="flex flex-col h-[720px] border-r border-neutral-200 transition-all duration-300 ease-in-out px-4 w-fit"
>
<!-- HEADER -->
<header class="flex flex-col justify-between">
<div class="flex items-center justify-between h-20 border-b border-neutral-200 pb-4 mb-4">
<!-- Logo -->
<img src={illustrasiImage} alt="Your Logo" class="w-full max-w-32" />
<!-- Collapsed Button -->
<div class="flex items-center gap-2">
<button type="button" class="ina-button ina-button--tertiary ina-button--sm p-1">
<span class="ina-button__icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><path
d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"
></path><path d="M9 17v1a3 3 0 0 0 6 0v-1"></path></svg
>
</span>
</button>
<button type="button" class="ina-button ina-button--tertiary ina-button--sm p-1">
<span class="ina-button__icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><path
d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"
></path><path d="M9 4v16"></path><path d="M15 10l-3 2l3 2"></path></svg
>
</span>
</button>
</div>
</div>
</header>
<div class="flex flex-col h-full justify-between">
<!-- NAVIGATION -->
<div class="flex flex-col gap-2 justify-center">
<button
type="button"
class="ina-button ina-button--link ina-button--md bg-guide-100 font-semibold p-2 justify-start gap-2"
>
<span class="ina-button__icon ina-button__icon--prefix">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><path d="M14 4h6v6h-6z"></path><path d="M4 14h6v6h-6z"></path><path
d="M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path><path
d="M7 7m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path></svg
>
</span>
<span class="ina-button__text text-black">Dashboard</span>
</button>
<button
type="button"
class="ina-button ina-button--link ina-button--md text-neutral-500 p-2 justify-start gap-2"
>
<span class="ina-button__icon ina-button__icon--prefix">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><path d="M4 6c0 1.657 3.582 3 8 3s8 -1.343 8 -3s-3.582 -3 -8 -3s-8 1.343 -8 3"
></path><path d="M4 6v6c0 1.657 3.582 3 8 3s8 -1.343 8 -3v-6"></path><path
d="M4 12v6c0 1.657 3.582 3 8 3s8 -1.343 8 -3v-6"></path></svg
>
</span>
<span class="ina-button__text">Penggunaan</span>
</button>
<button
type="button"
class="ina-button ina-button--link ina-button--md text-neutral-500 p-2 justify-start gap-2"
>
<span class="ina-button__icon ina-button__icon--prefix">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><path
d="M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16l-3 -2l-2 2l-2 -2l-2 2l-2 -2l-3 2m4 -14h6m-6 4h6m-2 4h2"
></path></svg
>
</span>
<span class="ina-button__text">Receipt</span>
</button>
</div>
<div class="flex flex-col gap-2">
<button
type="button"
class="ina-button ina-button--link ina-button--md text-neutral-500 p-2 justify-start gap-2"
>
<span class="ina-button__icon ina-button__icon--prefix">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path><path
d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path></svg
>
</span>
<span class="ina-button__text">User Management</span>
</button>
<button
type="button"
class="ina-button ina-button--link ina-button--md text-neutral-500 p-2 justify-start gap-2"
>
<span class="ina-button__icon ina-button__icon--prefix">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><path d="M3 21l18 0"></path><path d="M9 8l1 0"></path><path d="M9 12l1 0"></path><path
d="M9 16l1 0"></path><path d="M14 8l1 0"></path><path d="M14 12l1 0"></path><path
d="M14 16l1 0"></path><path d="M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16"
></path></svg
>
</span>
<span class="ina-button__text">Company</span>
</button>
</div>
</div>
<!-- FOOTER -->
<footer class="flex flex-col gap-4 mt-4 border-t border-neutral-200 pt-4">
<!-- USER -->
<div class="flex items-center justify-between pb-2">
<div
class="ina-avatar ina-avatar--circle ina-avatar--md ina-avatar--bg-neutral-100 ina-avatar--text-neutral-600 font-semibold"
style="width: 40px; height: 40px; font-size: 16px;"
>
HA
</div>
<div class="flex flex-col items-start overflow-hidden whitespace-nowrap px-2">
<span class="text-xs md:text-sm font-medium">Haechal Abdillah Suhendar</span>
<span class="text-[10px] md:text-xs text-neutral-500">Product Designer</span>
</div>
<div>
<button type="button" class="ina-button ina-button--tertiary ina-button--sm p-1">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path
d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path
d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg
>
</button>
</div>
</div>
</footer>
</aside>
