new main nav menu, remove alpine

packages/website/app/modules/ui/popover-menu.tsx

@@ -1,32 +0,0 @@
-import { MenuAlt4Icon } from "@heroicons/react/outline"
-import clsx from "clsx"
-import React from "react"
-import { linkClass } from "./components"
-
-export function PopoverMenu({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="relative" x-data="{ open: false }">
-      <button title="Menu" className={linkClass} x-on:click="open = !open">
-        <MenuAlt4Icon className="w-6" />
-      </button>
-      <div
-        role="menu"
-        className={`
-          w-48 max-h-[calc(100vh-4rem)]
-          absolute right-0 top-[calc(100%+8px)]
-          bg-slate-800 shadow rounded-lg
-          overflow-hidden overflow-y-auto 
-          transition-all
-        `}
-        x-bind:class="open ? 'visible opacity-100' : 'invisible opacity-0 translate-y-3'"
-      >
-        {children}
-      </div>
-    </div>
-  )
-}
-
-PopoverMenu.itemClass = clsx`
-  px-3 py-2 transition text-left font-medium block
-  opacity-50 hover:opacity-100 hover:bg-black/30
-`

packages/website/app/modules/ui/popper.tsx

@@ -0,0 +1,41 @@
+import { useRect } from "@reach/rect"
+import * as React from "react"
+import { Portal } from "~/modules/dom/portal"
+
+export function Popper({
+  renderReference,
+  renderPopover,
+}: {
+  renderReference: (referenceProps: {
+    ref: (element: HTMLElement | null | undefined) => void
+  }) => React.ReactNode
+  renderPopover: () => React.ReactNode
+}) {
+  const [reference, referenceRef] = React.useState<HTMLElement | null>()
+  const referenceRect = useRect(useValueAsRefObject(reference))
+
+  return (
+    <>
+      {renderReference({ ref: referenceRef })}
+      <Portal>
+        {referenceRect && (
+          <div
+            className="fixed -translate-x-full"
+            style={{
+              left: referenceRect.right,
+              top: referenceRect.bottom + 16,
+            }}
+          >
+            {renderPopover()}
+          </div>
+        )}
+      </Portal>
+    </>
+  )
+}
+
+function useValueAsRefObject<Value>(value: Value): { readonly current: Value } {
+  const ref = React.useRef<Value>(value)
+  ref.current = value
+  return ref
+}