finished landing

packages/website/src/components/menu.astro

@@ -0,0 +1,28 @@
+<details class="md:hidden relative" data-menu>
+  <summary class="list-none p-2 -m-2">
+    <slot name="button" />
+  </summary>
+  <div
+    class="w-48 max-h-[calc(100vh-5rem)] bg-slate-800 shadow rounded-lg overflow-x-hidden overflow-y-auto top-[calc(100%+8px)] right-0 absolute"
+  >
+    <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>