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

2026-02-12 12:28:42 +00:00 · 2024-08-21 17:05:05 +08:00
parent 182b2fd62d
commit 23b0db36b9
57 changed files with 988 additions and 1482 deletions
--- a/packages/frontend/component/src/theme/global.css
+++ b/packages/frontend/component/src/theme/global.css
@@ -288,3 +288,9 @@ body {
 [data-lit-react-wrapper] {
  display: contents;
 }
+
+/* Avoid color overriden by user-agent */
+button,
+input {
+  color: inherit;
+}
--- a/packages/frontend/component/src/ui/button/styles.css.ts
+++ b/packages/frontend/component/src/ui/button/styles.css.ts
@@ -1,6 +1,5 @@
 import { cssVar } from '@toeverything/theme';
-import { cssVarV2 } from '@toeverything/theme/v2';
-import { globalStyle, style } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 export const dropdownBtn = style({
  display: 'inline-flex',
  alignItems: 'center',
@@ -108,363 +107,3 @@ export const radioButtonGroup = style({
  // @ts-expect-error - fix electron drag
  WebkitAppRegion: 'no-drag',
 });
-export const button = style({
-  display: 'inline-flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  userSelect: 'none',
-  touchAction: 'manipulation',
-  outline: '0',
-  border: '1px solid',
-  padding: '0 18px',
-  borderRadius: '8px',
-  fontSize: cssVar('fontBase'),
-  transition: 'all .3s',
-  ['WebkitAppRegion' as string]: 'no-drag',
-  fontWeight: 600,
-  // changeable
-  height: '28px',
-  background: cssVar('white'),
-  borderColor: cssVarV2('layer/insideBorder/border'),
-  color: cssVarV2('text/primary'),
-  selectors: {
-    '&.text-bold': {
-      fontWeight: 600,
-    },
-    '&:not(.without-hover):hover': {
-      background: cssVar('hoverColor'),
-    },
-    '&.disabled': {
-      opacity: '.4',
-      cursor: 'default',
-      color: cssVar('textDisableColor'),
-      pointerEvents: 'none',
-    },
-    '&.loading': {
-      cursor: 'default',
-      color: cssVar('textDisableColor'),
-      pointerEvents: 'none',
-    },
-    '&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover':
-      {
-        background: 'inherit',
-      },
-    '&.block': {
-      display: 'flex',
-      width: '100%',
-    },
-    '&.circle': {
-      borderRadius: '50%',
-    },
-    '&.round': {
-      borderRadius: '14px',
-    },
-    // size
-    '&.large': {
-      height: '32px',
-    },
-    '&.round.large': {
-      borderRadius: '16px',
-    },
-    '&.extraLarge': {
-      height: '40px',
-    },
-    '&.round.extraLarge': {
-      borderRadius: '20px',
-    },
-    // type
-    '&.plain': {
-      color: cssVar('textPrimaryColor'),
-      borderColor: 'transparent',
-      background: 'transparent',
-    },
-    '&.primary': {
-      color: cssVar('pureWhite'),
-      background: cssVar('primaryColor'),
-      borderColor: cssVar('black10'),
-      boxShadow: cssVar('buttonInnerShadow'),
-    },
-    '&.primary:not(.without-hover):hover': {
-      background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
-        'primaryColor'
-      )}`,
-    },
-    '&.primary.disabled': {
-      opacity: '.4',
-      cursor: 'default',
-    },
-    '&.primary.disabled:not(.without-hover):hover': {
-      background: cssVar('primaryColor'),
-    },
-    '&.error': {
-      color: cssVar('pureWhite'),
-      background: cssVar('errorColor'),
-      borderColor: cssVar('black10'),
-      boxShadow: cssVar('buttonInnerShadow'),
-    },
-    '&.error:not(.without-hover):hover': {
-      background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
-        'errorColor'
-      )}`,
-    },
-    '&.error.disabled': {
-      opacity: '.4',
-      cursor: 'default',
-    },
-    '&.error.disabled:not(.without-hover):hover': {
-      background: cssVar('errorColor'),
-    },
-    '&.warning': {
-      color: cssVar('white'),
-      background: cssVar('warningColor'),
-      borderColor: cssVar('black10'),
-      boxShadow: cssVar('buttonInnerShadow'),
-    },
-    '&.warning:not(.without-hover):hover': {
-      background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
-        'warningColor'
-      )}`,
-    },
-    '&.warning.disabled': {
-      opacity: '.4',
-      cursor: 'default',
-    },
-    '&.warning.disabled:not(.without-hover):hover': {
-      background: cssVar('warningColor'),
-    },
-    '&.success': {
-      color: cssVar('pureWhite'),
-      background: cssVar('successColor'),
-      borderColor: cssVar('black10'),
-      boxShadow: cssVar('buttonInnerShadow'),
-    },
-    '&.success:not(.without-hover):hover': {
-      background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
-        'successColor'
-      )}`,
-    },
-    '&.success.disabled': {
-      opacity: '.4',
-      cursor: 'default',
-    },
-    '&.success.disabled:not(.without-hover):hover': {
-      background: cssVar('successColor'),
-    },
-    '&.processing': {
-      color: cssVar('pureWhite'),
-      background: cssVar('processingColor'),
-      borderColor: cssVar('black10'),
-      boxShadow: cssVar('buttonInnerShadow'),
-    },
-    '&.processing:not(.without-hover):hover': {
-      background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
-        'processingColor'
-      )}`,
-    },
-    '&.processing.disabled': {
-      opacity: '.4',
-      cursor: 'default',
-    },
-    '&.processing.disabled:not(.without-hover):hover': {
-      background: cssVar('processingColor'),
-    },
-  },
-});
-globalStyle(`${button} > span`, {
-  // flex: 1,
-  lineHeight: 1,
-  padding: '0 4px',
-});
-export const buttonIcon = style({
-  flexShrink: 0,
-  display: 'inline-flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  color: cssVar('iconColor'),
-  fontSize: '16px',
-  width: '16px',
-  height: '16px',
-  selectors: {
-    '&.start': {
-      marginRight: '4px',
-    },
-    '&.end': {
-      marginLeft: '4px',
-    },
-    '&.large': {
-      fontSize: '20px',
-      width: '20px',
-      height: '20px',
-    },
-    '&.extraLarge': {
-      fontSize: '20px',
-      width: '20px',
-      height: '20px',
-    },
-    '&.color-white': {
-      color: cssVar('white'),
-    },
-  },
-});
-export const iconButton = style({
-  display: 'inline-flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  userSelect: 'none',
-  touchAction: 'manipulation',
-  outline: '0',
-  border: '1px solid',
-  borderRadius: '4px',
-  transition: 'all .3s',
-  ['WebkitAppRegion' as string]: 'no-drag',
-  // changeable
-  width: '24px',
-  height: '24px',
-  fontSize: '20px',
-  color: cssVar('textPrimaryColor'),
-  borderColor: cssVar('borderColor'),
-  selectors: {
-    '&.without-padding': {
-      margin: '-2px',
-    },
-    '&.active': {
-      color: cssVar('primaryColor'),
-    },
-    '&:not(.without-hover):hover': {
-      background: cssVar('hoverColor'),
-    },
-    '&.disabled': {
-      opacity: '.4',
-      cursor: 'default',
-      color: cssVar('textDisableColor'),
-      pointerEvents: 'none',
-    },
-    '&.loading': {
-      cursor: 'default',
-      color: cssVar('textDisableColor'),
-      pointerEvents: 'none',
-    },
-    '&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover':
-      {
-        background: 'inherit',
-      },
-    // size
-    '&.large': {
-      width: '32px',
-      height: '32px',
-      fontSize: '24px',
-    },
-    '&.large.without-padding': {
-      margin: '-4px',
-    },
-    '&.small': {
-      width: '20px',
-      height: '20px',
-      fontSize: '16px',
-    },
-    '&.extra-small': {
-      width: '16px',
-      height: '16px',
-      fontSize: '12px',
-    },
-    // type
-    '&.plain': {
-      color: cssVar('iconColor'),
-      borderColor: 'transparent',
-      background: 'transparent',
-    },
-    '&.plain.active': {
-      color: cssVar('primaryColor'),
-    },
-    '&.primary': {
-      color: cssVar('white'),
-      background: cssVar('primaryColor'),
-      borderColor: cssVar('black10'),
-      boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
-    },
-    '&.primary:not(.without-hover):hover': {
-      background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
-        'primaryColor'
-      )}`,
-    },
-    '&.primary.disabled': {
-      opacity: '.4',
-      cursor: 'default',
-    },
-    '&.primary.disabled:not(.without-hover):hover': {
-      background: cssVar('primaryColor'),
-    },
-    '&.error': {
-      color: cssVar('white'),
-      background: cssVar('errorColor'),
-      borderColor: cssVar('black10'),
-      boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
-    },
-    '&.error:not(.without-hover):hover': {
-      background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
-        'errorColor'
-      )}`,
-    },
-    '&.error.disabled': {
-      opacity: '.4',
-      cursor: 'default',
-    },
-    '&.error.disabled:not(.without-hover):hover': {
-      background: cssVar('errorColor'),
-    },
-    '&.warning': {
-      color: cssVar('white'),
-      background: cssVar('warningColor'),
-      borderColor: cssVar('black10'),
-      boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
-    },
-    '&.warning:not(.without-hover):hover': {
-      background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
-        'warningColor'
-      )}`,
-    },
-    '&.warning.disabled': {
-      opacity: '.4',
-      cursor: 'default',
-    },
-    '&.warning.disabled:not(.without-hover):hover': {
-      background: cssVar('warningColor'),
-    },
-    '&.success': {
-      color: cssVar('white'),
-      background: cssVar('successColor'),
-      borderColor: cssVar('black10'),
-      boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
-    },
-    '&.success:not(.without-hover):hover': {
-      background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
-        'successColor'
-      )}`,
-    },
-    '&.success.disabled': {
-      opacity: '.4',
-      cursor: 'default',
-    },
-    '&.success.disabled:not(.without-hover):hover': {
-      background: cssVar('successColor'),
-    },
-    '&.processing': {
-      color: cssVar('white'),
-      background: cssVar('processingColor'),
-      borderColor: cssVar('black10'),
-      boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
-    },
-    '&.processing:not(.without-hover):hover': {
-      background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
-        'processingColor'
-      )}`,
-    },
-    '&.processing.disabled': {
-      opacity: '.4',
-      cursor: 'default',
-    },
-    '&.processing.disabled:not(.without-hover):hover': {
-      background: cssVar('processingColor'),
-    },
-  },
-});
--- a/packages/frontend/component/src/ui/menu/desktop/item.tsx
+++ b/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>
+  );
+};
--- a/packages/frontend/component/src/ui/menu/desktop/root.tsx
+++ b/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>
+  );
+};
--- a/packages/frontend/component/src/ui/menu/desktop/separator.tsx
+++ b/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}
    />
  );
--- a/packages/frontend/component/src/ui/menu/desktop/sub.tsx
+++ b/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>
+  );
+};
--- a/packages/frontend/component/src/ui/menu/index.ts
+++ b/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 };
--- a/packages/frontend/component/src/ui/menu/menu-icon.tsx
+++ b/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';
--- a/packages/frontend/component/src/ui/menu/menu-item.tsx
+++ b/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>
-  );
-};
--- a/packages/frontend/component/src/ui/menu/menu-sub.tsx
+++ b/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>
-  );
-};
--- a/packages/frontend/component/src/ui/menu/menu-trigger.stories.tsx
+++ b/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 = {};
--- a/packages/frontend/component/src/ui/menu/menu-trigger.tsx
+++ b/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>
+  );
+});
--- a/packages/frontend/component/src/ui/menu/menu.stories.tsx
+++ b/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',
+          },
        ],
      },
    ],
--- a/packages/frontend/component/src/ui/menu/menu.tsx
+++ b/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>
-  );
-};
--- a/packages/frontend/component/src/ui/menu/menu.types.ts
+++ b/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'>;
+}
--- a/packages/frontend/component/src/ui/menu/mobile/context.ts
+++ b/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: () => {},
+});
--- a/packages/frontend/component/src/ui/menu/mobile/item.tsx
+++ b/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>
+  );
+};
--- a/packages/frontend/component/src/ui/menu/mobile/root.tsx
+++ b/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>
+    </>
+  );
+};
--- a/packages/frontend/component/src/ui/menu/mobile/separator.tsx
+++ b/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} />
+  );
+};
--- a/packages/frontend/component/src/ui/menu/mobile/styles.css.ts
+++ b/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,
+});
--- a/packages/frontend/component/src/ui/menu/mobile/sub.tsx
+++ b/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>;
+};
--- a/packages/frontend/component/src/ui/menu/styles.css.ts
+++ b/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)',
  },
 });
--- a/packages/frontend/component/src/ui/menu/use-menu-item.tsx
+++ b/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,
  };
 };
--- a/packages/frontend/component/src/ui/modal/modal.stories.tsx
+++ b/packages/frontend/component/src/ui/modal/modal.stories.tsx
@@ -4,6 +4,7 @@ import { useCallback, useState } from 'react';
 import { Button } from '../button';
 import type { InputProps } from '../input';
 import { Input } from '../input';
+import { RadioGroup } from '../radio';
 import type { ConfirmModalProps } from './confirm-modal';
 import { ConfirmModal } from './confirm-modal';
 import type { ModalProps } from './modal';
@@ -105,3 +106,36 @@ export const Confirm: StoryFn<ModalProps> =

 export const Overlay: StoryFn<ModalProps> =
  OverlayModalTemplate.bind(undefined);
+
+export const Animations = () => {
+  const animations = ['fadeScaleTop', 'slideBottom', 'none'];
+  const [open, setOpen] = useState(false);
+  const [animation, setAnimation] =
+    useState<ModalProps['animation']>('fadeScaleTop');
+
+  return (
+    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+      <RadioGroup
+        value={animation}
+        onChange={setAnimation}
+        items={animations}
+      />
+      <Button onClick={() => setOpen(true)}>Open dialog</Button>
+      <Modal
+        contentWrapperStyle={
+          animation === 'slideBottom'
+            ? {
+                alignItems: 'end',
+                padding: 10,
+              }
+            : {}
+        }
+        open={open}
+        onOpenChange={setOpen}
+        animation={animation}
+      >
+        This is a dialog with animation: {animation}
+      </Modal>
+    </div>
+  );
+};
--- a/packages/frontend/component/src/ui/modal/modal.tsx
+++ b/packages/frontend/component/src/ui/modal/modal.tsx
@@ -9,9 +9,10 @@ import * as Dialog from '@radix-ui/react-dialog';
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import type { CSSProperties } from 'react';
+import type { CSSProperties, MouseEvent } from 'react';
 import { forwardRef, useCallback, useEffect, useState } from 'react';

+import { isMobile } from '../../utils/env';
 import type { IconButtonProps } from '../button';
 import { IconButton } from '../button';
 import * as styles from './styles.css';
@@ -32,6 +33,12 @@ export interface ModalProps extends DialogProps {
  contentOptions?: DialogContentProps;
  overlayOptions?: DialogOverlayProps;
  closeButtonOptions?: IconButtonProps;
+  contentWrapperClassName?: string;
+  contentWrapperStyle?: CSSProperties;
+  /**
+   * @default 'fadeScaleTop'
+   */
+  animation?: 'fadeScaleTop' | 'none' | 'slideBottom';
 }
 type PointerDownOutsideEvent = Parameters<
  Exclude<DialogContentProps['onPointerDownOutside'], undefined>
@@ -128,10 +135,14 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
      overlayOptions: {
        className: overlayClassName,
        style: overlayStyle,
+        onClick: onOverlayClick,
        ...otherOverlayOptions
      } = {},
      closeButtonOptions,
      children,
+      contentWrapperClassName,
+      contentWrapperStyle,
+      animation = 'fadeScaleTop',
      ...otherProps
    } = props;
    const { className: closeButtonClassName, ...otherCloseButtonProps } =
@@ -167,6 +178,18 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
      [onEscapeKeyDown, persistent]
    );

+    const handleOverlayClick = useCallback(
+      (e: MouseEvent<HTMLDivElement>) => {
+        onOverlayClick?.(e);
+        if (persistent) {
+          e.preventDefault();
+        } else {
+          onOpenChange?.(false);
+        }
+      },
+      [onOpenChange, onOverlayClick, persistent]
+    );
+
    if (!container) {
      return;
    }
@@ -180,13 +203,27 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
      >
        <Dialog.Portal container={container} {...portalOptions}>
          <Dialog.Overlay
-            className={clsx(styles.modalOverlay, overlayClassName)}
+            className={clsx(
+              `anim-${animation}`,
+              styles.modalOverlay,
+              overlayClassName,
+              { mobile: isMobile() }
+            )}
            style={{
              ...overlayStyle,
            }}
+            onClick={handleOverlayClick}
            {...otherOverlayOptions}
          />
-          <div data-modal={modal} className={clsx(styles.modalContentWrapper)}>
+          <div
+            data-modal={modal}
+            className={clsx(
+              `anim-${animation}`,
+              styles.modalContentWrapper,
+              contentWrapperClassName
+            )}
+            style={contentWrapperStyle}
+          >
            <Dialog.Content
              onPointerDownOutside={handlePointerDownOutSide}
              onEscapeKeyDown={handleEscapeKeyDown}
--- a/packages/frontend/component/src/ui/modal/styles.css.ts
+++ b/packages/frontend/component/src/ui/modal/styles.css.ts
@@ -1,4 +1,5 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import {
  createVar,
  generateIdentifier,
@@ -18,7 +19,7 @@ const overlayShow = keyframes({
    opacity: 1,
  },
 });
-const contentShow = keyframes({
+const contentShowFadeScaleTop = keyframes({
  from: {
    opacity: 0,
    transform: 'translateY(-2%) scale(0.96)',
@@ -28,7 +29,7 @@ const contentShow = keyframes({
    transform: 'translateY(0) scale(1)',
  },
 });
-export const contentHide = keyframes({
+const contentHideFadeScaleTop = keyframes({
  to: {
    opacity: 0,
    transform: 'translateY(-2%) scale(0.96)',
@@ -38,15 +39,35 @@ export const contentHide = keyframes({
    transform: 'translateY(0) scale(1)',
  },
 });
-
+const contentShowSlideBottom = keyframes({
+  from: { transform: 'translateY(100%)' },
+  to: { transform: 'translateY(0)' },
+});
+const contentHideSlideBottom = keyframes({
+  from: { transform: 'translateY(0)' },
+  to: { transform: 'translateY(100%)' },
+});
+const modalContentViewTransitionNameFadeScaleTop = generateIdentifier(
+  'modal-content-fade-scale-top'
+);
+const modalContentViewTransitionNameSlideBottom = generateIdentifier(
+  'modal-content-slide-bottom'
+);
 export const modalOverlay = style({
  position: 'fixed',
  inset: 0,
  backgroundColor: cssVar('backgroundModalColor'),
  zIndex: cssVar('zIndexModal'),
  animation: `${overlayShow} 150ms forwards`,
+  selectors: {
+    '&.anim-none': {
+      animation: 'none',
+    },
+    '&.mobile': {
+      backgroundColor: cssVarV2('layer/mobile/modal'),
+    },
+  },
 });
-const modalContentViewTransitionName = generateIdentifier('modal-content');
 export const modalContentWrapper = style({
  position: 'fixed',
  inset: 0,
@@ -54,14 +75,37 @@ export const modalContentWrapper = style({
  alignItems: 'center',
  justifyContent: 'center',
  zIndex: cssVar('zIndexModal'),
-  animation: `${contentShow} 150ms cubic-bezier(0.42, 0, 0.58, 1)`,
-  animationFillMode: 'forwards',
-  viewTransitionName: modalContentViewTransitionName,
-});
-globalStyle(`::view-transition-old(${modalContentViewTransitionName})`, {
-  animation: `${contentHide} 150ms cubic-bezier(0.42, 0, 0.58, 1)`,
-  animationFillMode: 'forwards',
+
+  selectors: {
+    '&.anim-none': {
+      animation: 'none',
+    },
+    '&.anim-fadeScaleTop': {
+      animation: `${contentShowFadeScaleTop} 150ms cubic-bezier(0.42, 0, 0.58, 1)`,
+      viewTransitionName: modalContentViewTransitionNameFadeScaleTop,
+      animationFillMode: 'forwards',
+    },
+    '&.anim-slideBottom': {
+      animation: `${contentShowSlideBottom} 0.23s ease`,
+      viewTransitionName: modalContentViewTransitionNameSlideBottom,
+      animationFillMode: 'forwards',
+    },
+  },
 });
+globalStyle(
+  `::view-transition-old(${modalContentViewTransitionNameFadeScaleTop})`,
+  {
+    animation: `${contentHideFadeScaleTop} 150ms cubic-bezier(0.42, 0, 0.58, 1)`,
+    animationFillMode: 'forwards',
+  }
+);
+globalStyle(
+  `::view-transition-old(${modalContentViewTransitionNameSlideBottom})`,
+  {
+    animation: `${contentHideSlideBottom} 0.23s ease`,
+    animationFillMode: 'forwards',
+  }
+);

 export const modalContent = style({
  vars: {
@@ -72,6 +116,8 @@ export const modalContent = style({
  width: widthVar,
  height: heightVar,
  minHeight: minHeightVar,
+  maxHeight: 'calc(100vh - 32px)',
+  maxWidth: 'calc(100vw - 20px)',
  boxSizing: 'border-box',
  fontSize: cssVar('fontBase'),
  fontWeight: '400',
@@ -81,7 +127,6 @@ export const modalContent = style({
  backgroundColor: cssVar('backgroundOverlayPanelColor'),
  boxShadow: cssVar('popoverShadow'),
  borderRadius: '12px',
-  maxHeight: 'calc(100vh - 32px)',
  // :focus-visible will set outline
  outline: 'none',
 });
--- a/packages/frontend/component/src/utils/env.ts
+++ b/packages/frontend/component/src/utils/env.ts
@@ -0,0 +1,3 @@
+export const isMobile = () => {
+  return environment.isBrowser && environment.isMobile;
+};