31 lines
758 B
Plaintext
31 lines
758 B
Plaintext
<details class="relative md:hidden" data-menu>
|
|
<summary
|
|
class="-m-2 cursor-pointer list-none p-2 transition hover:text-emerald-500"
|
|
>
|
|
<slot name="button" />
|
|
</summary>
|
|
<div
|
|
class="absolute right-0 top-[calc(100%+8px)] z-10 max-h-[calc(100vh-5rem)] w-48 overflow-y-auto overflow-x-hidden rounded-lg bg-slate-800 shadow"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</details>
|
|
|
|
<script>
|
|
for (const menu of document.querySelectorAll<HTMLDetailsElement>(
|
|
"[data-menu]",
|
|
)) {
|
|
window.addEventListener("click", (event) => {
|
|
if (!menu.contains(event.target as Node)) {
|
|
menu.open = false
|
|
}
|
|
})
|
|
menu.addEventListener("keydown", (event) => {
|
|
if (event.key === "Escape") {
|
|
menu.open = false
|
|
menu.querySelector("summary")!.focus()
|
|
}
|
|
})
|
|
}
|
|
</script>
|