fix: add toc to mobile views and account for branding on shared view layouts (#2997)

* fix: add toc to mobile views and center the branding

* add padding to bottom of sidebar

* put the mobile branding inline

* finesse the padding

* make spelling of sign-in email less crazy looking

* move mobile sidebar button into header

* adds scene to search and 404 pages

* fix title alignment

* make filter buttons tight

* clean up unused imports

* lint

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

app/scenes/Document/components/Header.tsx

@@ -164,14 +164,19 @@ function DocumentHeader({
     return (
       <Header
         title={document.title}
+        hasSidebar={!!sharedTree}
         breadcrumb={
-          <PublicBreadcrumb
-            documentId={document.id}
-            shareId={shareId}
-            sharedTree={sharedTree}
-          >
-            {toc}
-          </PublicBreadcrumb>
+          isMobile ? (
+            <TableOfContentsMenu headings={headings} />
+          ) : (
+            <PublicBreadcrumb
+              documentId={document.id}
+              shareId={shareId}
+              sharedTree={sharedTree}
+            >
+              {toc}
+            </PublicBreadcrumb>
+          )
         }
         actions={
           <>
@@ -186,10 +191,15 @@ function DocumentHeader({
   return (
     <>
       <Header
+        hasSidebar
         breadcrumb={
-          <DocumentBreadcrumb document={document}>
-            {!isEditing && toc}
-          </DocumentBreadcrumb>
+          isMobile ? (
+            <TableOfContentsMenu headings={headings} />
+          ) : (
+            <DocumentBreadcrumb document={document}>
+              {!isEditing && toc}
+            </DocumentBreadcrumb>
+          )
         }
         title={
           <>
@@ -200,11 +210,7 @@ function DocumentHeader({
         actions={
           <>
             <ObservingBanner />
-            {isMobile && (
-              <TocWrapper>
-                <TableOfContentsMenu headings={headings} />
-              </TocWrapper>
-            )}
+
             {!isPublishing && isSaving && !team?.collaborativeEditing && (
               <Status>{t("Saving")}…</Status>
             )}
@@ -328,9 +334,4 @@ const Status = styled(Action)`
   color: ${(props) => props.theme.slate};
 `;
 
-const TocWrapper = styled(Action)`
-  position: absolute;
-  left: 42px;
-`;
-
 export default observer(DocumentHeader);