feat(component): mobile menu support (#7892)

packages/frontend/component/src/ui/menu/desktop/item.tsx

@@ -0,0 +1,13 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+
+import type { MenuItemProps } from '../menu.types';
+import { useMenuItem } from '../use-menu-item';
+
+export const DesktopMenuItem = (props: MenuItemProps) => {
+  const { className, children, otherProps } = useMenuItem(props);
+  return (
+    <DropdownMenu.Item className={className} {...otherProps}>
+      {children}
+    </DropdownMenu.Item>
+  );
+};

packages/frontend/component/src/ui/menu/desktop/root.tsx

@@ -0,0 +1,39 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import clsx from 'clsx';
+import { Fragment } from 'react';
+
+import type { MenuProps } from '../menu.types';
+import * as styles from '../styles.css';
+
+export const DesktopMenu = ({
+  children,
+  items,
+  portalOptions,
+  rootOptions,
+  noPortal,
+  contentOptions: {
+    className = '',
+    style: contentStyle = {},
+    ...otherContentOptions
+  } = {},
+}: MenuProps) => {
+  const Wrapper = noPortal ? Fragment : DropdownMenu.Portal;
+  const wrapperProps = noPortal ? {} : portalOptions;
+  return (
+    <DropdownMenu.Root {...rootOptions}>
+      <DropdownMenu.Trigger asChild>{children}</DropdownMenu.Trigger>
+
+      <Wrapper {...wrapperProps}>
+        <DropdownMenu.Content
+          className={clsx(styles.menuContent, className)}
+          sideOffset={5}
+          align="start"
+          style={{ zIndex: 'var(--affine-z-index-popover)', ...contentStyle }}
+          {...otherContentOptions}
+        >
+          {items}
+        </DropdownMenu.Content>
+      </Wrapper>
+    </DropdownMenu.Root>
+  );
+};

packages/frontend/component/src/ui/menu/desktop/separator.tsx

@@ -1,20 +1,16 @@
 import type { DropdownMenuSeparatorProps } from '@radix-ui/react-dropdown-menu';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
-import { useMemo } from 'react';
 
-import * as styles from './styles.css';
+import * as styles from '../styles.css';
 
-export const MenuSeparator = ({
+export const DesktopMenuSeparator = ({
   className,
   ...otherProps
 }: DropdownMenuSeparatorProps) => {
   return (
     <DropdownMenu.Separator
-      className={useMemo(
-        () => clsx(styles.menuSeparator, className),
-        [className]
-      )}
+      className={clsx(styles.menuSeparator, className)}
       {...otherProps}
     />
   );

packages/frontend/component/src/ui/menu/desktop/sub.tsx

@@ -0,0 +1,46 @@
+import { ArrowRightSmallIcon } from '@blocksuite/icons/rc';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+
+import type { MenuSubProps } from '../menu.types';
+import * as styles from '../styles.css';
+import { useMenuItem } from '../use-menu-item';
+
+export const DesktopMenuSub = ({
+  children: propsChildren,
+  items,
+  portalOptions,
+  subOptions,
+  triggerOptions,
+  subContentOptions: {
+    className: subContentClassName = '',
+    ...otherSubContentOptions
+  } = {},
+}: MenuSubProps) => {
+  const { className, children, otherProps } = useMenuItem({
+    ...triggerOptions,
+    children: propsChildren,
+    suffixIcon: <ArrowRightSmallIcon />,
+  });
+
+  return (
+    <DropdownMenu.Sub {...subOptions}>
+      <DropdownMenu.SubTrigger className={className} {...otherProps}>
+        {children}
+      </DropdownMenu.SubTrigger>
+      <DropdownMenu.Portal {...portalOptions}>
+        <DropdownMenu.SubContent
+          sideOffset={12}
+          className={useMemo(
+            () => clsx(styles.menuContent, subContentClassName),
+            [subContentClassName]
+          )}
+          {...otherSubContentOptions}
+        >
+          {items}
+        </DropdownMenu.SubContent>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Sub>
+  );
+};

packages/frontend/component/src/ui/menu/index.ts

@@ -1,7 +1,29 @@
-export * from './menu';
 export * from './menu.types';
-export * from './menu-icon';
-export * from './menu-item';
-export * from './menu-separator';
-export * from './menu-sub';
-export * from './menu-trigger';
+import { isMobile } from '../../utils/env';
+import { DesktopMenuItem } from './desktop/item';
+import { DesktopMenu } from './desktop/root';
+import { DesktopMenuSeparator } from './desktop/separator';
+import { DesktopMenuSub } from './desktop/sub';
+import { MenuTrigger } from './menu-trigger';
+import { MobileMenuItem } from './mobile/item';
+import { MobileMenu } from './mobile/root';
+import { MobileMenuSeparator } from './mobile/separator';
+import { MobileMenuSub } from './mobile/sub';
+
+const MenuItem = isMobile() ? MobileMenuItem : DesktopMenuItem;
+const MenuSeparator = isMobile() ? MobileMenuSeparator : DesktopMenuSeparator;
+const MenuSub = isMobile() ? MobileMenuSub : DesktopMenuSub;
+const Menu = isMobile() ? MobileMenu : DesktopMenu;
+
+export {
+  DesktopMenu,
+  DesktopMenuItem,
+  DesktopMenuSeparator,
+  DesktopMenuSub,
+  MobileMenu,
+  MobileMenuItem,
+  MobileMenuSeparator,
+  MobileMenuSub,
+};
+
+export { Menu, MenuItem, MenuSeparator, MenuSub, MenuTrigger };

packages/frontend/component/src/ui/menu/menu-icon.tsx

@@ -1,39 +0,0 @@
-import clsx from 'clsx';
-import type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-import { forwardRef, useMemo } from 'react';
-
-import { menuItemIcon } from './styles.css';
-
-export interface MenuIconProps
-  extends PropsWithChildren,
-    HTMLAttributes<HTMLDivElement> {
-  icon?: ReactNode;
-  position?: 'start' | 'end';
-}
-
-export const MenuIcon = forwardRef<HTMLDivElement, MenuIconProps>(
-  ({ children, icon, position = 'start', className, ...otherProps }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={useMemo(
-          () =>
-            clsx(
-              menuItemIcon,
-              {
-                end: position === 'end',
-                start: position === 'start',
-              },
-              className
-            ),
-          [className, position]
-        )}
-        {...otherProps}
-      >
-        {icon || children}
-      </div>
-    );
-  }
-);
-
-MenuIcon.displayName = 'MenuIcon';

packages/frontend/component/src/ui/menu/menu-item.tsx

@@ -1,33 +0,0 @@
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-
-import type { MenuItemProps } from './menu.types';
-import { useMenuItem } from './use-menu-item';
-
-export const MenuItem = ({
-  children: propsChildren,
-  type = 'default',
-  className: propsClassName,
-  preFix,
-  endFix,
-  checked,
-  selected,
-  block,
-  ...otherProps
-}: MenuItemProps) => {
-  const { className, children } = useMenuItem({
-    children: propsChildren,
-    className: propsClassName,
-    type,
-    preFix,
-    endFix,
-    checked,
-    selected,
-    block,
-  });
-
-  return (
-    <DropdownMenu.Item className={className} {...otherProps}>
-      {children}
-    </DropdownMenu.Item>
-  );
-};

packages/frontend/component/src/ui/menu/menu-sub.tsx

@@ -1,72 +0,0 @@
-import { ArrowRightSmallIcon } from '@blocksuite/icons/rc';
-import type {
-  DropdownMenuPortalProps,
-  DropdownMenuSubContentProps,
-  DropdownMenuSubProps,
-} from '@radix-ui/react-dropdown-menu';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import { useMemo } from 'react';
-
-import type { MenuItemProps } from './menu.types';
-import { MenuIcon } from './menu-icon';
-import * as styles from './styles.css';
-import { useMenuItem } from './use-menu-item';
-export interface MenuSubProps {
-  children: ReactNode;
-  items: ReactNode;
-  triggerOptions?: Omit<MenuItemProps, 'onSelect' | 'children'>;
-  portalOptions?: Omit<DropdownMenuPortalProps, 'children'>;
-  subOptions?: Omit<DropdownMenuSubProps, 'children'>;
-  subContentOptions?: Omit<DropdownMenuSubContentProps, 'children'>;
-}
-
-export const MenuSub = ({
-  children: propsChildren,
-  items,
-  portalOptions,
-  subOptions,
-  triggerOptions: {
-    className: propsClassName,
-    preFix,
-    endFix,
-    type,
-    ...otherTriggerOptions
-  } = {},
-  subContentOptions: {
-    className: subContentClassName = '',
-    ...otherSubContentOptions
-  } = {},
-}: MenuSubProps) => {
-  const { className, children } = useMenuItem({
-    children: propsChildren,
-    className: propsClassName,
-    type,
-    preFix,
-    endFix,
-  });
-
-  return (
-    <DropdownMenu.Sub {...subOptions}>
-      <DropdownMenu.SubTrigger className={className} {...otherTriggerOptions}>
-        {children}
-        <MenuIcon position="end">
-          <ArrowRightSmallIcon />
-        </MenuIcon>
-      </DropdownMenu.SubTrigger>
-      <DropdownMenu.Portal {...portalOptions}>
-        <DropdownMenu.SubContent
-          sideOffset={10}
-          className={useMemo(
-            () => clsx(styles.menuContent, subContentClassName),
-            [subContentClassName]
-          )}
-          {...otherSubContentOptions}
-        >
-          {items}
-        </DropdownMenu.SubContent>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Sub>
-  );
-};

packages/frontend/component/src/ui/menu/menu-trigger.stories.tsx

@@ -1,18 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react';
-
-import type { MenuTriggerProps } from './index';
-import { MenuTrigger } from './index';
-
-export default {
-  title: 'UI/MenuTrigger',
-  component: MenuTrigger,
-} satisfies Meta<typeof MenuTrigger>;
-
-const Template: StoryFn<MenuTriggerProps> = args => (
-  <div style={{ width: '50%' }}>
-    <MenuTrigger {...args}>This is a menu trigger</MenuTrigger>
-  </div>
-);
-
-export const Default: StoryFn<MenuTriggerProps> = Template.bind(undefined);
-Default.args = {};

packages/frontend/component/src/ui/menu/menu-trigger.tsx

@@ -1,87 +1,24 @@
 import { ArrowDownSmallIcon } from '@blocksuite/icons/rc';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import type {
-  CSSProperties,
-  HTMLAttributes,
-  PropsWithChildren,
-  ReactNode,
-} from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, type Ref } from 'react';
 
-import { MenuIcon } from './menu-icon';
-import * as styles from './styles.css';
-import { triggerWidthVar } from './styles.css';
+import { Button, type ButtonProps } from '../button';
 
-export interface MenuTriggerProps
-  extends PropsWithChildren,
-    HTMLAttributes<HTMLButtonElement> {
-  width?: CSSProperties['width'];
-  disabled?: boolean;
-  noBorder?: boolean;
-  status?: 'error' | 'success' | 'warning' | 'default';
-  size?: 'default' | 'large' | 'extraLarge';
-  preFix?: ReactNode;
-  endFix?: ReactNode;
-  block?: boolean;
-}
+export interface MenuTriggerProps extends ButtonProps {}
 
-export const MenuTrigger = forwardRef<HTMLButtonElement, MenuTriggerProps>(
-  (
-    {
-      disabled,
-      noBorder = false,
-      className,
-      status = 'default',
-      size = 'default',
-      preFix,
-      endFix,
-      block = false,
-      children,
-      width,
-      style = {},
-      ...otherProps
-    },
-    ref
-  ) => {
-    return (
-      <button
-        ref={ref}
-        style={{
-          ...assignInlineVars({
-            [triggerWidthVar]: width
-              ? typeof width === 'number'
-                ? `${width}px`
-                : width
-              : 'auto',
-          }),
-          ...style,
-        }}
-        className={clsx(styles.menuTrigger, className, {
-          // status
-          block,
-          disabled: disabled,
-          'no-border': noBorder,
-          // color
-          error: status === 'error',
-          success: status === 'success',
-          warning: status === 'warning',
-          default: status === 'default',
-          // size
-          large: size === 'large',
-          'extra-large': size === 'extraLarge',
-        })}
-        {...otherProps}
-      >
-        {preFix}
-        {children}
-        {endFix}
-        <MenuIcon position="end">
-          <ArrowDownSmallIcon />
-        </MenuIcon>
-      </button>
-    );
-  }
-);
-
-MenuTrigger.displayName = 'MenuTrigger';
+export const MenuTrigger = forwardRef(function MenuTrigger(
+  { children, className, contentStyle, ...otherProps }: MenuTriggerProps,
+  ref: Ref<HTMLButtonElement>
+) {
+  return (
+    <Button
+      ref={ref}
+      suffix={<ArrowDownSmallIcon />}
+      className={clsx(className)}
+      contentStyle={{ width: 0, flex: 1, textAlign: 'start', ...contentStyle }}
+      {...otherProps}
+    >
+      {children}
+    </Button>
+  );
+});

packages/frontend/component/src/ui/menu/menu.stories.tsx

@@ -6,14 +6,7 @@ import { useCallback, useState } from 'react';
 import { Button } from '../button';
 import { Tooltip } from '../tooltip';
 import type { MenuItemProps, MenuProps } from './index';
-import {
-  Menu,
-  MenuIcon,
-  MenuItem,
-  MenuSeparator,
-  MenuSub,
-  MenuTrigger,
-} from './index';
+import { Menu, MenuItem, MenuSeparator, MenuSub } from './index';
 
 export default {
   title: 'UI/Menu',
@@ -29,14 +22,14 @@ const Template: StoryFn<MenuProps> = args => (
       },
     }}
   >
-    <MenuTrigger>menu trigger</MenuTrigger>
+    <Button>menu trigger</Button>
   </Menu>
 );
 
 interface Items {
   label: ReactNode;
   type?: MenuItemProps['type'];
-  preFix?: MenuItemProps['preFix'];
+  prefixIcon?: MenuItemProps['prefixIcon'];
   disabled?: boolean;
   divider?: boolean;
   subItems?: Items[];
@@ -49,13 +42,7 @@ const items: Items[] = [
   },
   {
     label: 'menu item with icon',
-    preFix: (
-      <Tooltip content="Use `MenuIcon` to wrap your icon and choose `preFix` or `endFix`">
-        <MenuIcon>
-          <InformationIcon />
-        </MenuIcon>
-      </Tooltip>
-    ),
+    prefixIcon: <InformationIcon />,
   },
   {
     label: (
@@ -80,13 +67,7 @@ const items: Items[] = [
     label: 'danger menu item',
     type: 'danger',
     block: true,
-    preFix: (
-      <Tooltip content="Use `MenuIcon` to wrap your icon and choose `preFix` or `endFix`">
-        <MenuIcon>
-          <InformationIcon />
-        </MenuIcon>
-      </Tooltip>
-    ),
+    prefixIcon: <InformationIcon />,
   },
   {
     label: 'warning menu item',
@@ -121,6 +102,9 @@ const items: Items[] = [
           {
             label: 'sub menu item 2-2',
           },
+          {
+            label: 'sub menu item 2-3',
+          },
         ],
       },
     ],

packages/frontend/component/src/ui/menu/menu.tsx

@@ -1,62 +0,0 @@
-import type {
-  DropdownMenuContentProps,
-  DropdownMenuPortalProps,
-  DropdownMenuProps,
-} from '@radix-ui/react-dropdown-menu';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-
-import * as styles from './styles.css';
-
-export interface MenuProps {
-  children: ReactNode;
-  items: ReactNode;
-  portalOptions?: Omit<DropdownMenuPortalProps, 'children'>;
-  rootOptions?: Omit<DropdownMenuProps, 'children'>;
-  contentOptions?: Omit<DropdownMenuContentProps, 'children'>;
-  noPortal?: boolean;
-}
-
-export const Menu = ({
-  children,
-  items,
-  portalOptions,
-  rootOptions,
-  noPortal,
-  contentOptions: {
-    className = '',
-    style: contentStyle = {},
-    ...otherContentOptions
-  } = {},
-}: MenuProps) => {
-  return (
-    <DropdownMenu.Root {...rootOptions}>
-      <DropdownMenu.Trigger asChild>{children}</DropdownMenu.Trigger>
-
-      {noPortal ? (
-        <DropdownMenu.Content
-          className={clsx(styles.menuContent, className)}
-          sideOffset={5}
-          align="start"
-          style={{ zIndex: 'var(--affine-z-index-popover)', ...contentStyle }}
-          {...otherContentOptions}
-        >
-          {items}
-        </DropdownMenu.Content>
-      ) : (
-        <DropdownMenu.Portal {...portalOptions}>
-          <DropdownMenu.Content
-            className={clsx(styles.menuContent, className)}
-            sideOffset={5}
-            align="start"
-            style={{ zIndex: 'var(--affine-z-index-popover)', ...contentStyle }}
-            {...otherContentOptions}
-          >
-            {items}
-          </DropdownMenu.Content>
-        </DropdownMenu.Portal>
-      )}
-    </DropdownMenu.Root>
-  );
-};

packages/frontend/component/src/ui/menu/menu.types.ts

@@ -1,11 +1,40 @@
-import type { DropdownMenuItemProps as MenuItemPropsPrimitive } from '@radix-ui/react-dropdown-menu';
+import type {
+  DropdownMenuContentProps,
+  DropdownMenuItemProps as MenuItemPropsPrimitive,
+  DropdownMenuPortalProps,
+  DropdownMenuProps,
+  DropdownMenuSubContentProps,
+  DropdownMenuSubProps,
+} from '@radix-ui/react-dropdown-menu';
+import type { ReactNode } from 'react';
+
+export interface MenuProps {
+  children: ReactNode;
+  items: ReactNode;
+  portalOptions?: Omit<DropdownMenuPortalProps, 'children'>;
+  rootOptions?: Omit<DropdownMenuProps, 'children'>;
+  contentOptions?: Omit<DropdownMenuContentProps, 'children'>;
+  noPortal?: boolean;
+}
 
 export interface MenuItemProps
-  extends Omit<MenuItemPropsPrimitive, 'asChild' | 'textValue'> {
+  extends Omit<MenuItemPropsPrimitive, 'asChild' | 'textValue' | 'prefix'> {
   type?: 'default' | 'warning' | 'danger';
-  preFix?: React.ReactNode;
-  endFix?: React.ReactNode;
+  // preFix?: React.ReactNode;
+  // endFix?: React.ReactNode;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  prefixIcon?: ReactNode;
+  suffixIcon?: ReactNode;
   checked?: boolean;
   selected?: boolean;
   block?: boolean;
 }
+export interface MenuSubProps {
+  children: ReactNode;
+  items: ReactNode;
+  triggerOptions?: Omit<MenuItemProps, 'onSelect' | 'children' | 'suffixIcon'>;
+  portalOptions?: Omit<DropdownMenuPortalProps, 'children'>;
+  subOptions?: Omit<DropdownMenuSubProps, 'children'>;
+  subContentOptions?: Omit<DropdownMenuSubContentProps, 'children'>;
+}

packages/frontend/component/src/ui/menu/mobile/context.ts

@@ -0,0 +1,22 @@
+import {
+  createContext,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+} from 'react';
+
+import type { MenuSubProps } from '../menu.types';
+
+export type SubMenuContent = {
+  items: ReactNode;
+  contentOptions?: MenuSubProps['subContentOptions'];
+};
+
+export const MobileMenuContext = createContext<{
+  subMenus: Array<SubMenuContent>;
+  setSubMenus: Dispatch<SetStateAction<Array<SubMenuContent>>>;
+  setOpen?: (v: boolean) => void;
+}>({
+  subMenus: [],
+  setSubMenus: () => {},
+});

packages/frontend/component/src/ui/menu/mobile/item.tsx

@@ -0,0 +1,35 @@
+import { useCallback, useContext } from 'react';
+
+import type { MenuItemProps } from '../menu.types';
+import { useMenuItem } from '../use-menu-item';
+import { MobileMenuContext } from './context';
+
+let preventDefaultFlag = false;
+const preventDefault = () => {
+  preventDefaultFlag = true;
+};
+
+export const MobileMenuItem = (props: MenuItemProps) => {
+  const { setOpen } = useContext(MobileMenuContext);
+  const { className, children, otherProps } = useMenuItem(props);
+  const { onSelect, onClick, ...restProps } = otherProps;
+
+  const onItemClick = useCallback(
+    (e: any) => {
+      onSelect?.(e);
+      onClick?.({ ...e, preventDefault });
+      if (preventDefaultFlag) {
+        preventDefaultFlag = false;
+      } else {
+        setOpen?.(false);
+      }
+    },
+    [onClick, onSelect, setOpen]
+  );
+
+  return (
+    <div onClick={onItemClick} className={className} {...restProps}>
+      {children}
+    </div>
+  );
+};

packages/frontend/component/src/ui/menu/mobile/root.tsx

@@ -0,0 +1,166 @@
+import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc';
+import { Slot } from '@radix-ui/react-slot';
+import clsx from 'clsx';
+import {
+  Fragment,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import { observeResize } from '../../../utils';
+import { Button } from '../../button';
+import { Modal, type ModalProps } from '../../modal';
+import type { MenuProps } from '../menu.types';
+import type { SubMenuContent } from './context';
+import { MobileMenuContext } from './context';
+import * as styles from './styles.css';
+import { MobileMenuSubRaw } from './sub';
+
+export const MobileMenu = ({
+  children,
+  items,
+  noPortal,
+  contentOptions: {
+    className,
+    onPointerDownOutside,
+    // ignore the following props
+    sideOffset: _sideOffset,
+    side: _side,
+    align: _align,
+
+    ...otherContentOptions
+  } = {},
+  rootOptions,
+}: MenuProps) => {
+  const [subMenus, setSubMenus] = useState<SubMenuContent[]>([]);
+  const [open, setOpen] = useState(false);
+  const [sliderHeight, setSliderHeight] = useState(0);
+  const { setOpen: pSetOpen } = useContext(MobileMenuContext);
+  const finalOpen = rootOptions?.open ?? open;
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const activeIndex = subMenus.length;
+
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) {
+        // a workaround to hack the onPointerDownOutside event
+        onPointerDownOutside?.({} as any);
+        setSubMenus([]);
+      }
+      setOpen(open);
+      rootOptions?.onOpenChange?.(open);
+    },
+    [onPointerDownOutside, rootOptions]
+  );
+
+  const Wrapper = noPortal ? Fragment : Modal;
+  const wrapperProps = noPortal
+    ? {}
+    : ({
+        open: finalOpen,
+        onOpenChange,
+        width: '100%',
+        animation: 'slideBottom',
+        withoutCloseButton: true,
+        contentOptions: {
+          className: clsx(className, styles.mobileMenuModal),
+          ...otherContentOptions,
+        },
+        contentWrapperStyle: {
+          alignItems: 'end',
+          paddingBottom: 10,
+        },
+      } satisfies ModalProps);
+
+  const onItemClick = useCallback((e: any) => {
+    e.preventDefault();
+    setOpen(prev => !prev);
+  }, []);
+
+  // dynamic height for slider
+  useEffect(() => {
+    if (!finalOpen) return;
+    let observer: () => void;
+    const t = setTimeout(() => {
+      const slider = sliderRef.current;
+      if (!slider) return;
+
+      const active = slider.querySelector(
+        `.${styles.menuContent}[data-index="${activeIndex}"]`
+      );
+      if (!active) return;
+
+      // for the situation that content is loaded asynchronously
+      observer = observeResize(active, entry => {
+        setSliderHeight(entry.borderBoxSize[0].blockSize);
+      });
+    }, 0);
+
+    return () => {
+      clearTimeout(t);
+      observer?.();
+    };
+  }, [activeIndex, finalOpen]);
+
+  /**
+   * For cascading menu usage
+   * ```tsx
+   * <Menu
+   *  items={
+   *    <Menu>Click me</Menu>
+   *  }
+   * >
+   *  Root
+   * </Menu>
+   * ```
+   */
+  if (pSetOpen) {
+    return <MobileMenuSubRaw items={items}>{children}</MobileMenuSubRaw>;
+  }
+
+  return (
+    <>
+      <Slot onClick={onItemClick}>{children}</Slot>
+      <MobileMenuContext.Provider
+        value={{ subMenus, setSubMenus, setOpen: onOpenChange }}
+      >
+        <Wrapper {...wrapperProps}>
+          <div
+            ref={sliderRef}
+            className={styles.slider}
+            style={{
+              transform: `translateX(-${100 * activeIndex}%)`,
+              height: sliderHeight,
+            }}
+          >
+            <div data-index={0} className={styles.menuContent}>
+              {items}
+            </div>
+            {subMenus.map((sub, index) => (
+              <div
+                key={index}
+                data-index={index + 1}
+                className={styles.menuContent}
+              >
+                <Button
+                  variant="plain"
+                  className={styles.backButton}
+                  prefix={<ArrowLeftSmallIcon />}
+                  onClick={() => setSubMenus(prev => prev.slice(0, index))}
+                  prefixStyle={{ width: 20, height: 20 }}
+                >
+                  Back
+                </Button>
+
+                {sub.items}
+              </div>
+            ))}
+          </div>
+        </Wrapper>
+      </MobileMenuContext.Provider>
+    </>
+  );
+};

packages/frontend/component/src/ui/menu/mobile/separator.tsx

@@ -0,0 +1,13 @@
+import type { DropdownMenuSeparatorProps } from '@radix-ui/react-dropdown-menu';
+import clsx from 'clsx';
+
+import * as styles from '../styles.css';
+
+export const MobileMenuSeparator = ({
+  className,
+  style,
+}: DropdownMenuSeparatorProps) => {
+  return (
+    <div className={clsx(styles.menuSeparator, className)} style={style} />
+  );
+};

packages/frontend/component/src/ui/menu/mobile/styles.css.ts

@@ -0,0 +1,79 @@
+import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+import { modalContent } from '../../modal/styles.css';
+import { bgColor } from '../styles.css';
+
+// To override desktop menu style defined in '../styles.css.ts'
+
+export const mobileMenuModal = style({
+  selectors: {
+    // to make sure it will override the desktop modal style
+    [`&.${modalContent}`]: {
+      backgroundColor: cssVarV2('layer/background/overlayPanel'),
+      boxShadow: cssVar('menuShadow'),
+      userSelect: 'none',
+      borderRadius: 24,
+      minHeight: 0,
+      padding: 0,
+      overflow: 'hidden',
+    },
+  },
+});
+
+export const slider = style({
+  display: 'flex',
+  alignItems: 'start',
+  transition: 'all 0.23s',
+});
+
+export const menuContent = style({
+  boxSizing: 'border-box',
+  fontSize: 17,
+  fontWeight: '400',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 0,
+  width: '100%',
+  flexShrink: 0,
+  padding: '13px 0px 13px 0px',
+});
+
+export const mobileMenuItem = style({
+  padding: '10px 20px',
+  borderRadius: 0,
+  ':hover': {
+    vars: {
+      [bgColor]: 'transparent',
+    },
+  },
+  ':active': {
+    vars: {
+      [bgColor]: cssVar('hoverColor'),
+    },
+  },
+  selectors: {
+    '&.danger:hover': {
+      vars: { [bgColor]: 'transparent' },
+    },
+    '&.danger:active': {
+      vars: { [bgColor]: cssVar('backgroundErrorColor') },
+    },
+    '&.warning:hover': {
+      vars: { [bgColor]: 'transparent' },
+    },
+    '&.warning:active': {
+      vars: { [bgColor]: cssVar('backgroundWarningColor') },
+    },
+  },
+});
+
+export const backButton = style({
+  height: 42,
+  alignSelf: 'start',
+  fontWeight: 600,
+  fontSize: 17,
+  paddingLeft: 0,
+  marginLeft: 20,
+});

packages/frontend/component/src/ui/menu/mobile/sub.tsx

@@ -0,0 +1,55 @@
+import { ArrowRightSmallPlusIcon } from '@blocksuite/icons/rc';
+import { Slot } from '@radix-ui/react-slot';
+import { type MouseEvent, useCallback, useContext } from 'react';
+
+import type { MenuSubProps } from '../menu.types';
+import { useMenuItem } from '../use-menu-item';
+import { MobileMenuContext } from './context';
+
+export const MobileMenuSub = ({
+  children: propsChildren,
+  items,
+  triggerOptions,
+  subContentOptions: contentOptions = {},
+}: MenuSubProps) => {
+  const {
+    className,
+    children,
+    otherProps: { onClick, ...otherTriggerOptions },
+  } = useMenuItem({
+    ...triggerOptions,
+    children: propsChildren,
+    suffixIcon: <ArrowRightSmallPlusIcon />,
+  });
+
+  return (
+    <MobileMenuSubRaw
+      onClick={onClick}
+      items={items}
+      subContentOptions={contentOptions}
+    >
+      <div className={className} {...otherTriggerOptions}>
+        {children}
+      </div>
+    </MobileMenuSubRaw>
+  );
+};
+
+export const MobileMenuSubRaw = ({
+  onClick,
+  children,
+  items,
+  subContentOptions: contentOptions = {},
+}: MenuSubProps & { onClick?: (e: MouseEvent<HTMLDivElement>) => void }) => {
+  const { setSubMenus } = useContext(MobileMenuContext);
+
+  const onItemClick = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      onClick?.(e);
+      setSubMenus(prev => [...prev, { items, contentOptions }]);
+    },
+    [contentOptions, items, onClick, setSubMenus]
+  );
+
+  return <Slot onClick={onItemClick}>{children}</Slot>;
+};

packages/frontend/component/src/ui/menu/styles.css.ts

@@ -1,57 +1,92 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { createVar, style } from '@vanilla-extract/css';
-export const triggerWidthVar = createVar('triggerWidthVar');
+
+export const iconColor = createVar('iconColor');
+export const labelColor = createVar('labelColor');
+export const bgColor = createVar('bgColor');
+
 export const menuContent = style({
   minWidth: '180px',
-  color: cssVar('textPrimaryColor'),
   borderRadius: '8px',
   padding: '8px',
   fontSize: cssVar('fontSm'),
   fontWeight: '400',
-  backgroundColor: cssVar('backgroundOverlayPanelColor'),
+  backgroundColor: cssVarV2('layer/background/overlayPanel'),
   boxShadow: cssVar('menuShadow'),
   userSelect: 'none',
   ['WebkitAppRegion' as string]: 'no-drag',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 4,
+  selectors: {
+    '&.mobile': {
+      padding: 0,
+      boxShadow: 'none',
+    },
+  },
 });
+
 export const menuItem = style({
+  vars: {
+    [iconColor]: cssVarV2('icon/primary'),
+    [labelColor]: cssVarV2('text/primary'),
+    [bgColor]: 'transparent',
+  },
+  color: labelColor,
+  backgroundColor: bgColor,
+
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  padding: '4px 12px',
-  borderRadius: '4px',
+  gap: 8,
+  padding: '4px',
+  borderRadius: 4,
   lineHeight: '22px',
   border: 'none',
   outline: 'none',
   cursor: 'pointer',
   boxSizing: 'border-box',
   selectors: {
-    '&:not(:last-of-type)': {
-      marginBottom: '4px',
-    },
     '&.block': {
       maxWidth: '100%',
     },
     '&[data-disabled]': {
-      color: cssVar('textDisableColor'),
+      vars: {
+        [iconColor]: cssVarV2('icon/disable'),
+        [labelColor]: cssVarV2('text/secondary'),
+      },
       pointerEvents: 'none',
-      cursor: 'not-allowed',
-    },
-    '&[data-highlighted]': {
-      backgroundColor: cssVar('hoverColor'),
+      cursor: 'default',
     },
     '&:hover': {
-      backgroundColor: cssVar('hoverColor'),
+      vars: {
+        [bgColor]: cssVar('hoverColor'),
+      },
+      outline: 'none !important',
+    },
+    '&:focus-visible': {
+      outline: '1px solid ' + cssVarV2('layer/insideBorder/primaryBorder'),
     },
     '&.danger:hover': {
-      color: cssVar('errorColor'),
-      backgroundColor: cssVar('backgroundErrorColor'),
+      vars: {
+        [iconColor]: cssVar('errorColor'),
+        [labelColor]: cssVar('errorColor'),
+        [bgColor]: cssVar('backgroundErrorColor'),
+      },
     },
     '&.warning:hover': {
-      color: cssVar('warningColor'),
-      backgroundColor: cssVar('backgroundWarningColor'),
+      vars: {
+        [iconColor]: cssVar('warningColor'),
+        [labelColor]: cssVar('warningColor'),
+        [bgColor]: cssVar('backgroundWarningColor'),
+      },
     },
-    '&.checked': {
-      color: cssVar('primaryColor'),
+    '&.checked, &.selected': {
+      vars: {
+        [iconColor]: cssVar('primaryColor'),
+        [labelColor]: cssVar('primaryColor'),
+      },
     },
   },
 });
@@ -66,84 +101,24 @@ export const menuItemIcon = style({
   display: 'flex',
   flexShrink: 0,
   fontSize: cssVar('fontH5'),
-  color: cssVar('iconColor'),
-  selectors: {
-    '&.start': { marginRight: '4px' },
-    '&.end': { marginLeft: '4px' },
-    '&.selected, &.checked': {
-      color: cssVar('primaryColor'),
-    },
-    [`${menuItem}.danger:hover &`]: {
-      color: cssVar('errorColor'),
-    },
-    [`${menuItem}.warning:hover &`]: {
-      color: cssVar('warningColor'),
-    },
-  },
+  color: iconColor,
+  width: 20,
+  height: 20,
 });
+
 export const menuSeparator = style({
-  height: '1px',
-  backgroundColor: cssVar('borderColor'),
-  marginTop: '12px',
-  marginBottom: '8px',
-});
-export const menuTrigger = style({
-  vars: {
-    [triggerWidthVar]: 'auto',
-  },
-  width: triggerWidthVar,
-  height: 28,
-  lineHeight: '22px',
-  padding: '0 10px',
-  color: cssVar('textPrimaryColor'),
-  border: '1px solid',
-  backgroundColor: cssVar('white'),
-  borderRadius: 8,
-  display: 'inline-flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  fontSize: cssVar('fontXs'),
-  cursor: 'pointer',
-  ['WebkitAppRegion' as string]: 'no-drag',
-  borderColor: cssVar('borderColor'),
-  outline: 'none',
-  selectors: {
-    '&:hover': {
-      background: cssVar('hoverColor'),
-    },
-    '&.no-border': {
-      border: 'unset',
-    },
-    '&.block': {
-      display: 'flex',
-      width: '100%',
-    },
-    // size
-    '&.large': {
-      height: 32,
-    },
-    '&.extra-large': {
-      height: 40,
-      fontWeight: 600,
-    },
-    // color
-    '&.disabled': {
-      cursor: 'default',
-      color: cssVar('textDisableColor'),
-      pointerEvents: 'none',
-    },
-    // TODO(@catsjuice): wait for design
-    '&.error': {
-      // borderColor: 'var(--affine-error-color)',
-    },
-    '&.success': {
-      // borderColor: 'var(--affine-success-color)',
-    },
-    '&.warning': {
-      // borderColor: 'var(--affine-warning-color)',
-    },
-    '&.default': {
-      // borderColor: 'var(--affine-border-color)',
-    },
+  width: '100%',
+  height: '8px',
+  position: 'relative',
+  ':after': {
+    content: '""',
+    display: 'block',
+    height: '1px',
+    width: '100%',
+    backgroundColor: cssVarV2('layer/insideBorder/border'),
+    position: 'absolute',
+    top: '50%',
+    left: 0,
+    transform: 'translateY(-50%) scaleY(0.5)',
   },
 });

packages/frontend/component/src/ui/menu/use-menu-item.tsx

@@ -1,73 +1,64 @@
 import { DoneIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
-import { useMemo } from 'react';
 
+import { isMobile } from '../../utils/env';
 import type { MenuItemProps } from './menu.types';
-import { MenuIcon } from './menu-icon';
+import { mobileMenuItem } from './mobile/styles.css';
 import * as styles from './styles.css';
 
-interface useMenuItemProps {
-  children: MenuItemProps['children'];
-  type: MenuItemProps['type'];
-  className: MenuItemProps['className'];
-  preFix: MenuItemProps['preFix'];
-  endFix: MenuItemProps['endFix'];
-  checked?: MenuItemProps['checked'];
-  selected?: MenuItemProps['selected'];
-  block?: MenuItemProps['block'];
-}
-
-export const useMenuItem = ({
+export const useMenuItem = <T extends MenuItemProps>({
   children: propsChildren,
   type = 'default',
   className: propsClassName,
-  preFix,
-  endFix,
+  prefix,
+  prefixIcon,
+  suffix,
+  suffixIcon,
   checked,
   selected,
   block,
-}: useMenuItemProps) => {
-  const className = useMemo(
-    () =>
-      clsx(
-        styles.menuItem,
-        {
-          danger: type === 'danger',
-          warning: type === 'warning',
-          checked,
-          selected,
-          block,
-        },
-        propsClassName
-      ),
-    [block, checked, propsClassName, selected, type]
+  ...otherProps
+}: T) => {
+  const className = clsx(
+    styles.menuItem,
+    {
+      danger: type === 'danger',
+      warning: type === 'warning',
+      checked,
+      selected,
+      block,
+      [mobileMenuItem]: isMobile(),
+    },
+    propsClassName
   );
 
-  const children = useMemo(
-    () => (
-      <>
-        {preFix}
-        <span className={styles.menuSpan}>{propsChildren}</span>
-        {endFix}
+  const children = (
+    <>
+      {prefix}
 
-        {checked || selected ? (
-          <MenuIcon
-            position="end"
-            className={clsx({
-              selected,
-              checked,
-            })}
-          >
-            <DoneIcon />
-          </MenuIcon>
-        ) : null}
-      </>
-    ),
-    [checked, endFix, preFix, propsChildren, selected]
+      {prefixIcon ? (
+        <div className={styles.menuItemIcon}>{prefixIcon}</div>
+      ) : null}
+
+      <span className={styles.menuSpan}>{propsChildren}</span>
+
+      {suffixIcon ? (
+        <div className={styles.menuItemIcon}>{suffixIcon}</div>
+      ) : null}
+
+      {suffix}
+
+      {checked || selected ? (
+        <div className={clsx(styles.menuItemIcon, 'selected')}>
+          <DoneIcon />
+        </div>
+      ) : null}
+    </>
   );
 
   return {
     children,
     className,
+    otherProps,
   };
 };