replace old docs

packages/docs/src/components/popover-menu.client.tsx

@@ -0,0 +1,38 @@
+import clsx from "clsx"
+
+const menus = document.querySelectorAll("[data-popover]")
+
+for (const menu of menus) {
+  const button = menu.querySelector<HTMLButtonElement>("[data-popover-button]")!
+
+  const panel = menu.querySelector<HTMLDivElement>("[data-popover-panel]")!
+  const panelClasses = clsx`${panel.className} transition-all`
+
+  const visibleClass = clsx`${panelClasses} visible opacity-100 translate-y-0`
+  const hiddenClass = clsx`${panelClasses} invisible opacity-0 translate-y-2`
+
+  let visible = false
+
+  const setVisible = (newVisible: boolean) => {
+    visible = newVisible
+    panel.className = visible ? visibleClass : hiddenClass
+
+    if (!visible) return
+
+    requestAnimationFrame(() => {
+      const handleClose = (event: MouseEvent) => {
+        if (panel.contains(event.target as Node)) return
+        setVisible(false)
+        window.removeEventListener("click", handleClose)
+      }
+      window.addEventListener("click", handleClose)
+    })
+  }
+
+  const toggleVisible = () => setVisible(!visible)
+
+  button.addEventListener("click", toggleVisible)
+
+  setVisible(false)
+  panel.hidden = false
+}