src/material/Menu.tsx

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

src/platform/StackedRouter.tsx

@@ -259,10 +259,7 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
 
   createRenderEffect(() => {
     if (stack.length === 0) {
-      mutStack(0, {
-        path: window.location.pathname,
-        rootId: createUniqueId(),
-      });
+      pushFrame(window.location.pathname);
     }
   });
 

src/timelines/ProfileMenuButton.tsx

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