fix(mobile): close menu when detail page navigate away (#8027)

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']()}
                 </Button>
 
                 {sub.items}

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,
       }}
     >