feat: Add navigation sidebar to shared documents (#2899)

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

app/scenes/Document/Shared.tsx

@@ -1,10 +1,13 @@
 import { Location } from "history";
+import { observer } from "mobx-react";
 import * as React from "react";
 import { RouteComponentProps } from "react-router-dom";
 import { useTheme } from "styled-components";
 import DocumentModel from "~/models/Document";
 import Error404 from "~/scenes/Error404";
 import ErrorOffline from "~/scenes/ErrorOffline";
+import Layout from "~/components/Layout";
+import Sidebar from "~/components/Sidebar/Shared";
 import useStores from "~/hooks/useStores";
 import { NavigationNode } from "~/types";
 import { OfflineError } from "~/utils/errors";
@@ -20,7 +23,9 @@ type Props = RouteComponentProps<{
   location: Location<{ title?: string }>;
 };
 
-export default function SharedDocumentScene(props: Props) {
+function SharedDocumentScene(props: Props) {
+  const { ui } = useStores();
+
   const theme = useTheme();
   const [response, setResponse] = React.useState<{
     document: DocumentModel;
@@ -42,13 +47,13 @@ export default function SharedDocumentScene(props: Props) {
           shareId,
         });
         setResponse(response);
+        ui.setActiveDocument(response.document);
       } catch (err) {
         setError(err);
       }
     }
-
     fetchData();
-  }, [documents, documentSlug, shareId]);
+  }, [documents, documentSlug, shareId, ui]);
 
   if (error) {
     return error instanceof OfflineError ? <ErrorOffline /> : <Error404 />;
@@ -58,13 +63,21 @@ export default function SharedDocumentScene(props: Props) {
     return <Loading location={props.location} />;
   }
 
+  const sidebar = response.sharedTree ? (
+    <Sidebar rootNode={response.sharedTree} shareId={shareId} />
+  ) : undefined;
+
   return (
-    <Document
-      abilities={EMPTY_OBJECT}
-      document={response.document}
-      sharedTree={response.sharedTree}
-      shareId={shareId}
-      readOnly
-    />
+    <Layout title={response.document.title} sidebar={sidebar}>
+      <Document
+        abilities={EMPTY_OBJECT}
+        document={response.document}
+        sharedTree={response.sharedTree}
+        shareId={shareId}
+        readOnly
+      />
+    </Layout>
   );
 }
+
+export default observer(SharedDocumentScene);