diff --git a/app/components/Sidebar/components/SharedDocumentLink.tsx b/app/components/Sidebar/components/SharedDocumentLink.tsx index 4bc1ca629..69a50a387 100644 --- a/app/components/Sidebar/components/SharedDocumentLink.tsx +++ b/app/components/Sidebar/components/SharedDocumentLink.tsx @@ -1,3 +1,4 @@ +import includes from "lodash/includes"; import { observer } from "mobx-react"; import * as React from "react"; import { useTranslation } from "react-i18next"; @@ -6,14 +7,15 @@ import Collection from "~/models/Collection"; import Document from "~/models/Document"; import useStores from "~/hooks/useStores"; import { sharedDocumentPath } from "~/utils/routeHelpers"; +import { descendants } from "~/utils/tree"; import Disclosure from "./Disclosure"; import SidebarLink from "./SidebarLink"; type Props = { node: NavigationNode; collection?: Collection; - activeDocumentId: string | undefined; - activeDocument: Document | undefined; + activeDocumentId?: string; + activeDocument?: Document; isDraft?: boolean; depth: number; index: number; @@ -41,10 +43,19 @@ function DocumentLink( const hasChildDocuments = !!node.children.length || activeDocument?.parentDocumentId === node.id; const document = documents.get(node.id); - const showChildren = React.useMemo( - () => !!hasChildDocuments, - [hasChildDocuments] + () => + !!( + hasChildDocuments && + ((activeDocumentId && + includes( + descendants(node).map((n) => n.id), + activeDocumentId + )) || + isActiveDocument || + depth <= 1) + ), + [hasChildDocuments, activeDocumentId, isActiveDocument, depth, node] ); const [expanded, setExpanded] = React.useState(showChildren); @@ -55,12 +66,6 @@ function DocumentLink( } }, [showChildren]); - React.useEffect(() => { - if (isActiveDocument) { - setExpanded(true); - } - }, [isActiveDocument]); - const handleDisclosureClick = React.useCallback( (ev: React.SyntheticEvent) => { ev.preventDefault();