Profile: add subscribe menu

src/material/Menu.tsx

@@ -3,8 +3,9 @@ import { MenuList } from "@suid/material";
 import {
   createEffect,
   createSignal,
+  type Component,
   type JSX,
-  type ParentComponent,
+  type ParentProps,
 } from "solid-js";
 import { ANIM_CURVE_STD } from "./theme";
 import "./Menu.css";
@@ -13,13 +14,13 @@ import {
   animateShrinkToTopRight,
 } from "../platform/anim";
 
-type Anchor = Pick<DOMRect, "top" | "left" | "right">
+export type Anchor = Pick<DOMRect, "top" | "left" | "right">
 
-type Props = {
+export type MenuProps = ParentProps<{
   open?: boolean;
   onClose?: JSX.EventHandlerUnion<HTMLDialogElement, Event>;
   anchor: () => Anchor;
-};
+}>;
 
 function px(n?: number) {
   if (n) {
@@ -29,7 +30,22 @@ function px(n?: number) {
   }
 }
 
-const Menu: ParentComponent<Props> = (props) => {
+export function createManagedMenuState() {
+  const [anchor, setAnchor] = createSignal<Anchor>();
+
+  return [
+    setAnchor,
+    {
+      get open() {
+        return !!anchor();
+      },
+      anchor: anchor as () => Anchor,
+      onClose: () => setAnchor(),
+    },
+  ] as const;
+}
+
+const Menu: Component<MenuProps> = (props) => {
   let root: HTMLDialogElement;
   const windowSize = useWindowSize();