Keep nested docs in shared sidebar collapsed by default (#5208)

Co-authored-by: Tom Moor <tom@getoutline.com>

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;
+  activeDocumentId?: string;
-  activeDocument: Document | undefined;
+  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();