Menu: support submenu

src/material/Menu.css

@@ -7,6 +7,22 @@
   width: max-content;
   box-shadow: var(--tutu-shadow-e8);
   contain: content;
+
+  &.e1 {
+    box-shadow: var(--tutu-shadow-e9);
+  }
+
+  &.e2 {
+    box-shadow: var(--tutu-shadow-e10);
+  }
+
+  &.e3 {
+    box-shadow: var(--tutu-shadow-e11);
+  }
+
+  &.e4 {
+    box-shadow: var(--tutu-shadow-e12);
+  }
 }
 
 dialog.Menu::backdrop {

src/material/Menu.tsx

@@ -14,7 +14,7 @@ import {
   animateShrinkToTopRight,
 } from "../platform/anim";
 
-export type Anchor = Pick<DOMRect, "top" | "left" | "right">
+export type Anchor = Pick<DOMRect, "top" | "left" | "right"> & { e?: number };
 
 export type MenuProps = ParentProps<{
   open?: boolean;
@@ -52,8 +52,23 @@ const Menu: Component<MenuProps> = (props) => {
   const [anchorPos, setAnchorPos] = createSignal<{
     left?: number;
     top?: number;
+    e?: number;
   }>({});
 
+  if (import.meta.env.DEV) {
+    createEffect(() => {
+      switch (anchorPos().e) {
+        case 1:
+        case 2:
+        case 3:
+        case 3:
+          return;
+        default:
+          console.warn('value %s is invalid for param "e"', anchorPos().e);
+      }
+    });
+  }
+
   let openAnimationOrigin: "lt" | "rt" = "lt";
 
   createEffect(() => {
@@ -65,18 +80,19 @@ const Menu: Component<MenuProps> = (props) => {
         const rend = root.getBoundingClientRect();
 
         const { width } = windowSize;
-        const { left, top, right } = a;
+        const { left, top, right, e } = a;
         if (left > width / 2) {
           openAnimationOrigin = "rt";
           setAnchorPos({
             left: right - rend.width,
             top,
+            e,
           });
 
           animateGrowFromTopRight(root, { easing: ANIM_CURVE_STD });
         } else {
           openAnimationOrigin = "lt";
-          setAnchorPos({ left, top });
+          setAnchorPos({ left, top, e });
 
           const overflow = root.style.overflow;
           root.style.overflow = "hidden";
@@ -154,7 +170,7 @@ const Menu: Component<MenuProps> = (props) => {
           e.stopPropagation();
         }
       }}
-      class="Menu"
+      class={`Menu e${anchorPos().e || 0}`}
       style={{
         left: px(anchorPos().left),
         top: px(anchorPos().top),
@@ -164,6 +180,7 @@ const Menu: Component<MenuProps> = (props) => {
       <div
         style={{
           background: "var(--tutu-color-surface)",
+          display: "contents"
         }}
       >
         <MenuList>{props.children}</MenuList>