feat: Optional branding on shared documents (#4450)

* feat: Optional branding on shared documents

* Refactor
Remove unneccessarily exposed team id
Remove top-level collapsible document on publicly shared urls

* fix: Branding disappears when revising document
fix: Clicking title should go back to main app when logged in

app/components/Sidebar/Shared.tsx

@@ -1,33 +1,52 @@
 import { observer } from "mobx-react";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import Team from "~/models/Team";
 import Scrollable from "~/components/Scrollable";
 import SearchPopover from "~/components/SearchPopover";
 import useStores from "~/hooks/useStores";
 import { NavigationNode } from "~/types";
+import history from "~/utils/history";
+import { homePath, sharedDocumentPath } from "~/utils/routeHelpers";
+import TeamLogo from "../TeamLogo";
 import Sidebar from "./Sidebar";
+import HeaderButton from "./components/HeaderButton";
 import Section from "./components/Section";
 import DocumentLink from "./components/SharedDocumentLink";
 
 type Props = {
+  team?: Team;
   rootNode: NavigationNode;
   shareId: string;
 };
 
-function SharedSidebar({ rootNode, shareId }: Props) {
-  const { ui, documents } = useStores();
+function SharedSidebar({ rootNode, team, shareId }: Props) {
+  const { ui, documents, auth } = useStores();
+  const { t } = useTranslation();
 
   return (
     <Sidebar>
-      <ScrollContainer flex>
+      {team && (
+        <HeaderButton
+          title={team.name}
+          image={<TeamLogo model={team} size={32} alt={t("Logo")} />}
+          onClick={() =>
+            history.push(
+              auth.user ? homePath() : sharedDocumentPath(shareId, rootNode.url)
+            )
+          }
+        />
+      )}
+      <ScrollContainer topShadow flex>
         <TopSection>
           <SearchPopover shareId={shareId} />
         </TopSection>
         <Section>
           <DocumentLink
             index={0}
+            depth={0}
             shareId={shareId}
-            depth={1}
             node={rootNode}
             activeDocumentId={ui.activeDocumentId}
             activeDocument={documents.active}
@@ -44,8 +63,11 @@ const ScrollContainer = styled(Scrollable)`
 
 const TopSection = styled(Section)`
   // this weird looking && increases the specificity of the style rule
-  && {
+  &&:first-child {
     margin-top: 16px;
+  }
+
+  && {
     margin-bottom: 16px;
   }
 `;