diff --git a/packages/frontend/component/src/ui/menu/mobile/root.tsx b/packages/frontend/component/src/ui/menu/mobile/root.tsx index a401409e86..f283bda2f2 100644 --- a/packages/frontend/component/src/ui/menu/mobile/root.tsx +++ b/packages/frontend/component/src/ui/menu/mobile/root.tsx @@ -1,3 +1,4 @@ +import { useI18n } from '@affine/i18n'; import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc'; import { Slot } from '@radix-ui/react-slot'; import clsx from 'clsx'; @@ -48,10 +49,13 @@ export const MobileMenu = ({ [onPointerDownOutside, rootOptions] ); - const onItemClick = useCallback((e: any) => { - e.preventDefault(); - setOpen(prev => !prev); - }, []); + const onItemClick = useCallback( + (e: any) => { + e.preventDefault(); + onOpenChange(!open); + }, + [onOpenChange, open] + ); // dynamic height for slider useEffect(() => { @@ -78,6 +82,8 @@ export const MobileMenu = ({ }; }, [activeIndex, finalOpen]); + const t = useI18n(); + /** * For cascading menu usage * ```tsx @@ -139,7 +145,7 @@ export const MobileMenu = ({ onClick={() => setSubMenus(prev => prev.slice(0, index))} prefixStyle={{ width: 20, height: 20 }} > - Back + {t['com.affine.backButton']()} {sub.items} diff --git a/packages/frontend/mobile/src/pages/workspace/detail/page-header-more-button.tsx b/packages/frontend/mobile/src/pages/workspace/detail/page-header-more-button.tsx index cedb3eff8b..3bc7b75ec4 100644 --- a/packages/frontend/mobile/src/pages/workspace/detail/page-header-more-button.tsx +++ b/packages/frontend/mobile/src/pages/workspace/detail/page-header-more-button.tsx @@ -8,6 +8,7 @@ import { useFavorite } from '@affine/core/components/blocksuite/block-suite-head import { IsFavoriteIcon } from '@affine/core/components/pure/icons'; import { track } from '@affine/core/mixpanel'; import { EditorService } from '@affine/core/modules/editor'; +import { ViewService } from '@affine/core/modules/workbench/services/view'; import { EditorOutlinePanel } from '@affine/core/pages/workspace/detail-page/tabs/outline'; import { preventDefault } from '@affine/core/utils'; import { useI18n } from '@affine/i18n'; @@ -19,7 +20,7 @@ import { TocIcon, } from '@blocksuite/icons/rc'; import { useLiveData, useService } from '@toeverything/infra'; -import { useCallback } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import * as styles from './page-header-more-button.css'; import { DocInfoSheet } from './sheets/doc-info'; @@ -34,6 +35,9 @@ export const PageHeaderMenuButton = ({ docId }: PageMenuProps) => { const editorService = useService(EditorService); const editorContainer = useLiveData(editorService.editor.editorContainer$); + const [open, setOpen] = useState(false); + const location = useLiveData(useService(ViewService).view.location$); + const isInTrash = useLiveData( editorService.editor.doc.meta$.map(meta => meta.trash) ); @@ -57,8 +61,14 @@ export const PageHeaderMenuButton = ({ docId }: PageMenuProps) => { if (open) { track.$.header.docOptions.open(); } + setOpen(open); }, []); + useEffect(() => { + // when the location is changed, close the menu + handleMenuOpenChange(false); + }, [handleMenuOpenChange, location.pathname]); + const handleToggleFavorite = useCallback(() => { track.$.header.docOptions.toggleFavorite(); toggleFavorite(); @@ -117,6 +127,7 @@ export const PageHeaderMenuButton = ({ docId }: PageMenuProps) => { align: 'center', }} rootOptions={{ + open, onOpenChange: handleMenuOpenChange, }} >