ProfileMenuButton: use self-built Menu

src/material/Menu.tsx

@@ -14,6 +14,7 @@ import {
   animateGrowFromTopRight,
   animateShrinkToTopRight,
 } from "../platform/anim";
+import type { MenuListProps } from "@suid/material/MenuList";
 
 export type Anchor = Pick<DOMRect, "top" | "left" | "right"> & { e?: number };
 
@@ -22,6 +23,7 @@ export type MenuProps = ParentProps<
     open?: boolean;
     onClose?: JSX.EventHandlerUnion<HTMLDialogElement, Event>;
     anchor: () => Anchor;
+    MenuListProps?: MenuListProps;
 
     id?: string;
   } & JSX.AriaAttributes
@@ -213,11 +215,8 @@ const Menu: Component<MenuProps> = (props) => {
       tabIndex={-1}
       {...rest}
     >
-      <div
+      <div class="container" role="presentation">
-        class="container"
+        <MenuList {...props.MenuListProps}>{props.children}</MenuList>
-        role="presentation"
-      >
-        <MenuList>{props.children}</MenuList>
       </div>
     </dialog>
   );

src/timelines/ProfileMenuButton.tsx

@@ -5,13 +5,10 @@ import {
   ListItemAvatar,
   ListItemIcon,
   ListItemText,
-  Menu,
   MenuItem,
 } from "@suid/material";
 import {
-  ErrorBoundary,
   Show,
-  createSignal,
   createUniqueId,
   type ParentComponent,
 } from "solid-js";
@@ -22,6 +19,7 @@ import {
   FeaturedPlayList as ListIcon,
 } from "@suid/icons-material";
 import A from "../platform/A";
+import Menu, { createManagedMenuState } from "../material/Menu";
 
 const ProfileMenuButton: ParentComponent<{
   profile?: {
@@ -35,29 +33,20 @@ const ProfileMenuButton: ParentComponent<{
       };
     };
   };
-  onClick?: () => void;
-  onClose?: () => void;
 }> = (props) => {
   const menuId = createUniqueId();
   const buttonId = createUniqueId();
 
-  let [anchor, setAnchor] = createSignal<HTMLButtonElement | null>(null);
+  const [open, state] = createManagedMenuState();
-  const open = () => !!anchor();
 
   const onClick = (
     event: MouseEvent & { currentTarget: HTMLButtonElement },
   ) => {
-    setAnchor(event.currentTarget);
+    open(event.currentTarget.getBoundingClientRect());
-    props.onClick?.();
   };
 
   const inf = () => props.profile?.account.inf;
 
-  const onClose = () => {
-    props.onClick?.();
-    setAnchor(null);
-  };
-
   return (
     <>
       <ButtonBase
@@ -75,23 +64,13 @@ const ProfileMenuButton: ParentComponent<{
       </ButtonBase>
       <Menu
         id={menuId}
-        anchorEl={anchor()}
-        open={open()}
-        onClose={onClose}
         MenuListProps={{
-          "aria-labelledby": buttonId,
+          "aria-labelledby": menuId,
-          sx: {
+          style: {
-            minWidth: "220px",
+            "min-width": "220px",
           },
         }}
-        anchorOrigin={{
+        {...state}
-          vertical: "top",
-          horizontal: "right",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "right",
-        }}
       >
         <MenuItem
           component={A}