feat(navigation): improve children visualization

lib/browser/navigation/__tests__/components.test.js

@@ -96,7 +96,8 @@ describe('browser.navigation.components', () => {
       const sidebarItem = mount(createComponent({
         item: {
           path: '/foo',
-          type: 'link'
+          type: 'link',
+          isCurrent: true
         },
         page: {
           path: '/foo'

lib/browser/navigation/__tests__/containers.test.jsx

@@ -94,5 +94,42 @@ describe('browser.navigation.containers', () => {
 
       expect(navigation.state().visibleHeaderId).toBe('bar');
     });
+
+    it('should decorate navigation items with special methods and properties', () => {
+      const navigation = mount(createComponent({
+        data: {
+          navigation: {
+            main: [
+              {
+                type: 'link',
+                text: 'Foo',
+                path: '/foo/index.html',
+                children: [
+                  {
+                    type: 'link',
+                    text: 'Bar',
+                    path: '/foo/bar.html'
+                  }
+                ]
+              }
+            ]
+          }
+        },
+        page: {
+          path: '/foo/bar.html'
+        }
+      }));
+
+      const items = navigation.instance().items;
+
+      expect(typeof items[0].hasParent).toBe('function');
+      expect(typeof items[0].parent).toBe('function');
+      expect(typeof items[0].isCurrent).toBe('boolean');
+
+      expect(items[0].isCurrentAncestor).toBe(true);
+      expect(items[0].children[0].isCurrent).toBe(true);
+      expect(items[0].children[0].hasParent()).toBe(true);
+      expect(items[0].children[0].parent()).toBe(items[0]);
+    });
   });
 });

lib/browser/navigation/components.jsx

@@ -79,22 +79,19 @@ class SidebarItem extends React.Component  {
     super(props);
 
     this.state = {
-      isCurrent: false,
       hasChildren: false,
       childrenListIsVisible: false
     };
   }
 
   componentDidMount () {
     const {item, page} = this.props;
-    const isCurrent = item.path === page.path;
     const hasChildren = Array.isArray(item.children) && item.children.length > 0;
     const childrenListIsVisible = (item.children || []).find((child) => {
       return child.path === page.path;
-    }) || (hasChildren && isCurrent);
+    }) || (hasChildren && item.isCurrent);
 
     this.setState({
-      isCurrent,
       hasChildren,
       childrenListIsVisible
     });
@@ -110,7 +107,8 @@ class SidebarItem extends React.Component  {
   render () {
     const {item, page, url_for, tocItems, config, visibleHeaderId, className} = this.props;
     const isLabel = item.type === 'label';
-    const isCurrent = this.state.isCurrent;
+    const isCurrentAncestor = item.isCurrentAncestor;
+    const isCurrent = item.isCurrent;
     const hasChildren = this.state.hasChildren;
     const childrenListIsVisible = this.state.childrenListIsVisible;
 
@@ -150,6 +148,7 @@ class SidebarItem extends React.Component  {
       'doc-sidebar-list__item--label': isLabel,
       'doc-sidebar-list__item--link': !isLabel,
       'doc-sidebar-list__item--current': isCurrent,
+      'doc-sidebar-list__item--current-ancestor': !!isCurrentAncestor,
       'doc-sidebar-list__item--has-children': hasChildren,
       'doc-sidebar-list__item--children-list--hidden': hasChildren && !childrenListIsVisible,
       [className]: true

lib/browser/navigation/containers.jsx

@@ -14,6 +14,7 @@ class Navigation extends React.Component {
     super(props);
 
     this.url_for = url_for(this.props);
+
     this.state = {
       search: null,
       collapsed: false,
@@ -29,6 +30,7 @@ class Navigation extends React.Component {
 
     this.$body = $('body');
     this.$content = $('.doc-content');
+    this.items = this.getItems();
 
     // this selector is wrapped in a function
     // since the selected element can be removed and recreated depending on the state
@@ -52,6 +54,44 @@ class Navigation extends React.Component {
     });
   }
 
+  getItems () {
+    const {page} = this.props;
+    const {navigation} = Object.assign({}, { navigation: {} }, this.props.data);
+    const items = navigation.main || [];
+
+    (function recurse (items, parent) {
+      items.forEach((item) => {
+        // add parent methods
+        item.parent = () => { return parent; };
+        item.hasParent = () => {
+          return !!item.parent();
+        };
+
+        // check if the item represents the current page,
+        // and traverse ancestors
+        if (item.path === page.path) {
+          item.isCurrent = true;
+          (function walk (p) {
+            if (p) {
+              p.isCurrentAncestor = true;
+            }
+            if (p && p.hasParent()) {
+              walk(p.parent());
+            }
+          })(item.parent());
+        } else {
+          item.isCurrent = false;
+        }
+
+        if (item.children && item.children.length > 0) {
+          recurse(item.children, item);
+        }
+      });
+    })(items);
+
+    return items;
+  }
+
   getTocItems ($headers) {
     return $headers.map(function (i, h) {
       return {
@@ -180,7 +220,7 @@ class Navigation extends React.Component {
 
         <Sidebar
           url_for={this.url_for}
-          items={navigation.main}
+          items={this.items}
           page={this.props.page}
           config={this.props.config}
           search={this.state.search}

source/style/_doc/navigation.scss

@@ -160,10 +160,10 @@
   }
 }
 
-.doc-sidebar-list{
+.doc-sidebar-list {
   padding-left: 0px;
 
-  &__item{
+  &__item {
     margin-left: $doc-sidebar-left-margin;
     list-style: none;
     line-height: 30px;
@@ -199,10 +199,18 @@
       }
     }
 
-    &--current{
+    &--current, &--current-ancestor {
       color: $doc-sidebar-current-color;
       font-weight: $doc-sidebar-font-weight-bold;
+    }
 
+    a {
+      color: inherit;
+    }
+  }
+
+  > li.doc-sidebar-list__item { // just first level
+    &--current, &--current-ancestor {
       &::before{
         border-left: 3px solid $doc-sidebar-current-color;
         content: " ";
@@ -211,10 +219,6 @@
         height: 30px;
       }
     }
-
-    a{
-      color: inherit;
-    }
   }
 
   &__toc-list {
@@ -241,7 +245,7 @@
 // Sidebar children list
 .doc-sidebar-list {
   &__children-list {
-    padding-left: 0;
+    padding-left: 10px;
   }
 
   &__children-list--hidden {