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

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

app/components/Layout.tsx

@@ -1,151 +1,80 @@
-import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { MenuIcon } from "outline-icons";
 import * as React from "react";
 import { Helmet } from "react-helmet";
-import { withTranslation, WithTranslation } from "react-i18next";
-import { Switch, Route } from "react-router-dom";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import RootStore from "~/stores/RootStore";
-import ErrorSuspended from "~/scenes/ErrorSuspended";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import { LoadingIndicatorBar } from "~/components/LoadingIndicator";
-import RegisterKeyDown from "~/components/RegisterKeyDown";
-import Sidebar from "~/components/Sidebar";
-import SettingsSidebar from "~/components/Sidebar/Settings";
 import SkipNavContent from "~/components/SkipNavContent";
 import SkipNavLink from "~/components/SkipNavLink";
-import history from "~/utils/history";
+import useKeyDown from "~/hooks/useKeyDown";
+import useStores from "~/hooks/useStores";
 import { isModKey } from "~/utils/keyboard";
-import {
-  searchUrl,
-  matchDocumentSlug as slug,
-  newDocumentPath,
-  settingsPath,
-} from "~/utils/routeHelpers";
-import withStores from "./withStores";
 
-const DocumentHistory = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "document-history" */
-      "~/components/DocumentHistory"
-    )
-);
-const CommandBar = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "command-bar" */
-      "~/components/CommandBar"
-    )
-);
+type Props = {
+  title?: string;
+  children?: React.ReactNode;
+  sidebar?: React.ReactNode;
+  rightRail?: React.ReactNode;
+};
 
-type Props = WithTranslation &
-  RootStore & {
-    children?: React.ReactNode;
-  };
+function Layout({ title, children, sidebar, rightRail }: Props) {
+  const { ui } = useStores();
+  const sidebarCollapsed = !sidebar || ui.isEditing || ui.sidebarCollapsed;
 
-@observer
-class Layout extends React.Component<Props> {
-  scrollable: HTMLDivElement | null | undefined;
-
-  @observable
-  keyboardShortcutsOpen = false;
-
-  goToSearch = (ev: KeyboardEvent) => {
-    if (!ev.metaKey && !ev.ctrlKey) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      history.push(searchUrl());
+  useKeyDown(".", (event) => {
+    if (isModKey(event)) {
+      ui.toggleCollapsedSidebar();
     }
-  };
+  });
 
-  goToNewDocument = () => {
-    const { activeCollectionId } = this.props.ui;
-    if (!activeCollectionId) return;
-    const can = this.props.policies.abilities(activeCollectionId);
-    if (!can.update) return;
-    history.push(newDocumentPath(activeCollectionId));
-  };
+  return (
+    <Container column auto>
+      <Helmet>
+        <title>{title ? title : "Outline"}</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      </Helmet>
 
-  render() {
-    const { auth, ui } = this.props;
-    const { user, team } = auth;
-    const showSidebar = auth.authenticated && user && team;
-    const sidebarCollapsed = ui.isEditing || ui.sidebarCollapsed;
-    if (auth.isSuspended) return <ErrorSuspended />;
+      <SkipNavLink />
 
-    return (
-      <Container column auto>
-        <RegisterKeyDown trigger="n" handler={this.goToNewDocument} />
-        <RegisterKeyDown trigger="t" handler={this.goToSearch} />
-        <RegisterKeyDown trigger="/" handler={this.goToSearch} />
-        <RegisterKeyDown
-          trigger="."
-          handler={(event) => {
-            if (isModKey(event)) {
-              ui.toggleCollapsedSidebar();
-            }
-          }}
-        />
-        <Helmet>
-          <title>{team && team.name ? team.name : "Outline"}</title>
-          <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0"
-          />
-        </Helmet>
-        <SkipNavLink />
-
-        {this.props.ui.progressBarVisible && <LoadingIndicatorBar />}
+      {ui.progressBarVisible && <LoadingIndicatorBar />}
 
+      {sidebar && (
         <MobileMenuButton
           onClick={ui.toggleMobileSidebar}
           icon={<MenuIcon />}
           iconColor="currentColor"
           neutral
         />
+      )}
 
-        <Container auto>
-          {showSidebar && (
-            <Switch>
-              <Route path={settingsPath()} component={SettingsSidebar} />
-              <Route component={Sidebar} />
-            </Switch>
-          )}
+      <Container auto>
+        {sidebar}
 
-          <SkipNavContent />
-          <Content
-            auto
-            justify="center"
-            $isResizing={ui.sidebarIsResizing}
-            $sidebarCollapsed={sidebarCollapsed}
-            style={
-              sidebarCollapsed
-                ? undefined
-                : {
-                    marginLeft: `${ui.sidebarWidth}px`,
-                  }
-            }
-          >
-            {this.props.children}
-          </Content>
+        <SkipNavContent />
+        <Content
+          auto
+          justify="center"
+          $isResizing={ui.sidebarIsResizing}
+          $sidebarCollapsed={sidebarCollapsed}
+          $hasSidebar={!!sidebar}
+          style={
+            sidebarCollapsed
+              ? undefined
+              : {
+                  marginLeft: `${ui.sidebarWidth}px`,
+                }
+          }
+        >
+          {children}
+        </Content>
 
-          <React.Suspense fallback={null}>
-            <Switch>
-              <Route
-                path={`/doc/${slug}/history/:revisionId?`}
-                component={DocumentHistory}
-              />
-            </Switch>
-          </React.Suspense>
-        </Container>
-        <CommandBar />
+        {rightRail}
       </Container>
-    );
-  }
+    </Container>
+  );
 }
 
 const Container = styled(Flex)`
@@ -174,6 +103,7 @@ const MobileMenuButton = styled(Button)`
 const Content = styled(Flex)<{
   $isResizing?: boolean;
   $sidebarCollapsed?: boolean;
+  $hasSidebar?: boolean;
 }>`
   margin: 0;
   transition: ${(props) =>
@@ -189,9 +119,10 @@ const Content = styled(Flex)<{
 
   ${breakpoint("tablet")`
     ${(props: any) =>
+      props.$hasSidebar &&
       props.$sidebarCollapsed &&
       `margin-left: ${props.theme.sidebarCollapsedWidth}px;`}
   `};
 `;
 
-export default withTranslation()(withStores(Layout));
+export default observer(Layout);