diff --git a/packages/web/components/common/MyMenu/index.tsx b/packages/web/components/common/MyMenu/index.tsx index f32053a1aa7..c8b74332788 100644 --- a/packages/web/components/common/MyMenu/index.tsx +++ b/packages/web/components/common/MyMenu/index.tsx @@ -11,6 +11,7 @@ import { import MyIcon from '../Icon'; import MyDivider from '../MyDivider'; import type { IconNameType } from '../Icon/type'; +import { useSystem } from '../../../hooks/useSystem'; export type MenuItemType = 'primary' | 'danger'; @@ -77,10 +78,14 @@ const MyMenu = ({ alignItems: 'center', fontSize: 'sm' }; + + const { isPc } = useSystem(); const ref = useRef(null); const closeTimer = useRef(); const [isOpen, setIsOpen] = useState(false); + const formatTrigger = !isPc ? 'click' : trigger; + useOutsideClick({ ref: ref, handler: () => { @@ -103,17 +108,18 @@ const MyMenu = ({ isLazy lazyBehavior={'keepMounted'} placement="bottom-start" + computePositionOnMount > { - if (trigger === 'hover') { + if (formatTrigger === 'hover') { setIsOpen(true); } clearTimeout(closeTimer.current); }} onMouseLeave={() => { - if (trigger === 'hover') { + if (formatTrigger === 'hover') { closeTimer.current = setTimeout(() => { setIsOpen(false); }, 100); @@ -124,7 +130,7 @@ const MyMenu = ({ position={'relative'} onClickCapture={(e) => { e.stopPropagation(); - if (trigger === 'click') { + if (formatTrigger === 'click') { setIsOpen(!isOpen); } }} diff --git a/packages/web/hooks/useSystem.ts b/packages/web/hooks/useSystem.ts new file mode 100644 index 00000000000..be7816cba2d --- /dev/null +++ b/packages/web/hooks/useSystem.ts @@ -0,0 +1,7 @@ +import { useMediaQuery } from '@chakra-ui/react'; + +export const useSystem = () => { + const [isPc] = useMediaQuery('(min-width: 900px)'); + + return { isPc }; +};