mirror of
https://github.com/KRTirtho/spotube.git
synced 2025-12-07 15:59:42 +00:00
44 lines
1.0 KiB
Plaintext
44 lines
1.0 KiB
Plaintext
---
|
|
import { LuMenu } from "react-icons/lu";
|
|
---
|
|
|
|
<button
|
|
id="button-toggle"
|
|
class="btn btn-icon"
|
|
class:list={[Astro.props.class]}
|
|
>
|
|
{(<LuMenu />)}
|
|
</button>
|
|
|
|
<div
|
|
id="drawer"
|
|
class="fixed bg-white dark:bg-surface-800 shadow-lg transition-all duration-300 left-0 top-0 h-screen w-64 -translate-x-[100vw] z-[100]"
|
|
>
|
|
<button
|
|
id="button-close"
|
|
class="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
|
|
aria-label="Close"
|
|
>
|
|
×
|
|
</button>
|
|
<div class="p-4">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const buttonToggle = document.getElementById("button-toggle");
|
|
const drawer = document.getElementById("drawer");
|
|
const buttonClose = document.getElementById("button-close");
|
|
|
|
buttonToggle?.addEventListener("click", () => {
|
|
drawer?.classList.toggle("-translate-x-[100vw]");
|
|
});
|
|
|
|
buttonClose?.addEventListener("click", () => {
|
|
drawer?.classList.add("-translate-x-[100vw]");
|
|
});
|
|
});
|
|
</script>
|