Build the full navigation tree for document in header

frontend/scenes/DocumentScene/DocumentScene.js

@@ -146,6 +146,26 @@ class DocumentScene extends React.Component {
     }
   };
 
+  renderLayoutTitle() {
+    const { document, pathToDocument } = this.store;
+    if (document && document.collection) {
+      const titleSections = pathToDocument
+        ? pathToDocument.map(node => <Link to={node.url}>{node.title}</Link>)
+        : [];
+      titleSections.unshift(
+        <Link to={document.collection.url}>{document.collection.name}</Link>
+      );
+
+      return (
+        <span>
+          &nbsp;/&nbsp;
+          {titleSections.reduce((prev, curr) => [prev, ' / ', curr])}
+          {` / ${document.title}`}
+        </span>
+      );
+    }
+  }
+
   render() {
     const { sidebar } = this.props.ui;
 
@@ -177,13 +197,8 @@ class DocumentScene extends React.Component {
           </DropdownMenu>
         </div>
       );
-      title = (
+
-        <span>
+      title = this.renderLayoutTitle();
-          &nbsp;/&nbsp;
-          <Link to={doc.collection.url}>{doc.collection.name}</Link>
-          {` / ${doc.title}`}
-        </span>
-      );
       titleText = `${doc.collection.name} - ${doc.title}`;
     }
 

frontend/scenes/DocumentScene/DocumentSceneStore.js

@@ -11,7 +11,11 @@ import {
   autorunAsync,
 } from 'mobx';
 import { client } from 'utils/ApiClient';
-import type { Document as DocumentType, Collection } from 'types';
+import type {
+  Document as DocumentType,
+  Collection,
+  NavigationNode,
+} from 'types';
 
 const DOCUMENT_PREFERENCES = 'DOCUMENT_PREFERENCES';
 
@@ -54,6 +58,27 @@ class DocumentSceneStore {
     }
   }
 
+  @computed get pathToDocument(): ?Array<NavigationNode> {
+    let path;
+    const traveler = (node, previousPath) => {
+      if (this.document && node.id === this.document.id) {
+        path = previousPath;
+        return;
+      } else {
+        node.children.forEach(childNode => {
+          const newPath = [...previousPath, node];
+          return traveler(childNode, newPath);
+        });
+      }
+    };
+
+    if (this.document && this.collectionTree) {
+      traveler(this.collectionTree, []);
+      invariant(path, 'Path is not available for collection, abort');
+      return path.splice(1);
+    }
+  }
+
   /* Actions */
 
   @action fetchDocument = async (

frontend/types/index.js

@@ -11,13 +11,21 @@ export type Team = {
   name: string,
 };
 
+export type NavigationNode = {
+  id: string,
+  title: string,
+  url: string,
+  collapsed: boolean,
+  children: Array<NavigationNode>,
+};
+
 export type Collection = {
   createdAt: string,
   description: ?string,
   id: string,
   name: string,
   type: 'atlas' | 'journal',
-  navigationTree: Object, // TODO
+  navigationTree: NavigationNode,
   updatedAt: string,
   url: string,
 };