Collapse nested module names

assets/js/app.js

@@ -17,10 +17,11 @@ import markdown from 'highlight.js/lib/languages/markdown'
 import sql from 'highlight.js/lib/languages/sql'
 import xml from 'highlight.js/lib/languages/xml'
 
+import hasContent from './template-helpers/hasContent'
 import isArray from './template-helpers/isArray'
-import isEmptyNode from './template-helpers/isEmptyNode'
 import isLocal from './template-helpers/isLocal'
-import newGroup from './template-helpers/newGroup'
+import groupChanged from './template-helpers/groupChanged'
+import nestingChanged from './template-helpers/nestingChanged'
 import showSummary from './template-helpers/showSummary'
 
 import {initialize as initEvents} from './events'
@@ -32,10 +33,11 @@ window.$ = $
 
 $(() => {
   // Set up Handlebars.js
+  Handlebars.registerHelper('hasContent', hasContent)
   Handlebars.registerHelper('isArray', isArray)
-  Handlebars.registerHelper('isEmptyNode', isEmptyNode)
   Handlebars.registerHelper('isLocal', isLocal)
-  Handlebars.registerHelper('newGroup', newGroup)
+  Handlebars.registerHelper('groupChanged', groupChanged)
+  Handlebars.registerHelper('nestingChanged', nestingChanged)
   Handlebars.registerHelper('showSummary', showSummary)
 
   // Set up Highlight.js

assets/js/events.js

@@ -63,7 +63,9 @@ function fillSidebarWithNodes (nodes, filter) {
 
   $('#full-list li a').on('click', e => {
     var $target = $(e.target)
-    if ($target.hasClass('expand')) {
+    // the user might have clicked on the nesting indicator
+    var linkTag = $target.is('a') ? $target : $target.closest('a')
+    if (linkTag.hasClass('expand')) {
       e.preventDefault()
       $(e.target).closest('li').toggleClass('open')
     } else {

assets/js/template-helpers/newGroup.js → assets/js/template-helpers/groupChanged.js

@@ -1,6 +1,8 @@
 export default function (context, nodeGroup, options) {
   var group = nodeGroup || ''
   if (context.group !== group) {
+    // reset the nesting context for the #nestingChanged block helper
+    delete context.nestedContext
     context.group = group
     return options.fn(this)
   }

assets/js/template-helpers/isEmptyNode.js → assets/js/template-helpers/hasContent.js

@@ -1,17 +1,17 @@
 export default function (node, options) {
   if (hasItems(node.headers)) {
-    return options.inverse(this)
+    return options.fn(this)
   }
 
   if (node.nodeGroups) {
     for (let {nodes} of node.nodeGroups) {
       if (hasItems(nodes)) {
-        return options.inverse(this)
+        return options.fn(this)
       }
     }
   }
 
-  return options.fn(this)
+  return options.inverse(this)
 }
 
 function hasItems (items) {

assets/js/template-helpers/nestingChanged.js

@@ -0,0 +1,9 @@
+export default function (context, nestedContext, options) {
+  // context.nestedContext is also reset each time a new group
+  // is encountered (the value is reset within the #groupChanged
+  // block helper)
+  if (context.nestedContext !== nestedContext) {
+    context.nestedContext = nestedContext
+    return options.fn(this)
+  }
+}

assets/js/templates/sidebar-items.handlebars

@@ -1,50 +1,58 @@
 <ul id="full-list">
-{{#each nodes as |node nodeId|}}
-    {{#newGroup ../this node.group}}
+  {{#each nodes as |node nodeId|}}
+    {{#groupChanged ../this node.group}}
       <li class="group">{{node.group}}</li>
-    {{/newGroup}}
-    <li class="{{#isLocal node.id}}clicked open{{/isLocal}}">
+    {{/groupChanged}}
 
-    {{!-- When visiting a module page, the link to this module page
-    in the menu should not link to a new page, instead should link
-    to the top of the page itself. --}}
-    {{#isEmptyNode node}}
-      <a href="{{node.id}}.html" title="{{node.title}}">{{node.title}}</a>
-    {{else}}
-      <a href="{{node.id}}.html" title="{{node.title}}" class="expand">{{node.title}}</a>
+    {{#nestingChanged ../this node.nested_context}}
+      <li class="nesting-context" title="{{node.nested_context}}" aria-hidden="true">{{node.nested_context}}</li>
+    {{/nestingChanged}}
 
-      <ul>
-        <li>
-          <a href="{{node.id}}.html#content">Top</a>
-        </li>
-
-        {{#isArray node.headers}}
-          {{#each node.headers}}
-            <li>
-              <a href="{{node.id}}.html#{{{anchor}}}">{{id}}</a>
-            </li>
-          {{/each}}
+    <li class="{{#isLocal node.id}}clicked open{{/isLocal}} {{#if node.nested_title}}nested{{/if}}">
+      {{! When visiting a module page, the link to this module page
+      in the menu should not link to a new page, instead should link
+      to the top of the page itself. }}
+      <a href="{{node.id}}.html" title="{{node.title}}" {{#hasContent node}}class="expand"{{/hasContent}}>
+        {{#if node.nested_title}}
+          {{node.nested_title}}
         {{else}}
-          {{#showSummary node}}
-            <li>
-              <a href="{{node.id}}.html#summary">Summary</a>
-            </li>
-          {{/showSummary}}
-          {{#each node.nodeGroups as |group|}}
-            <li class="docs">
-              <a href="{{node.id}}.html#{{group.key}}" class="expand">{{group.name}}</a>
-              <ul class="{{group.key}}-list deflist">
-                {{#each group.nodes}}
-                  <li>
-                    <a href="{{node.id}}.html#{{anchor}}">{{id}}</a>
-                  </li>
-                {{/each}}
-              </ul>
-            </li>
-          {{/each}}
-        {{/isArray}}
-      </ul>
-    {{/isEmptyNode}}
-  </li>
-{{/each}}
+          {{node.title}}
+        {{/if}}
+      </a>
+
+      {{#hasContent node}}
+        <ul>
+          <li>
+            <a href="{{node.id}}.html#content">Top</a>
+          </li>
+
+            {{#isArray node.headers}}
+              {{#each node.headers}}
+                <li>
+                  <a href="{{node.id}}.html#{{{anchor}}}">{{id}}</a>
+                </li>
+              {{/each}}
+            {{else}}
+              {{#showSummary node}}
+                <li>
+                  <a href="{{node.id}}.html#summary">Summary</a>
+                </li>
+              {{/showSummary}}
+              {{#each node.nodeGroups as |group|}}
+                <li class="docs">
+                  <a href="{{node.id}}.html#{{group.key}}" class="expand">{{group.name}}</a>
+                  <ul class="{{group.key}}-list deflist">
+                    {{#each group.nodes}}
+                      <li>
+                        <a href="{{node.id}}.html#{{anchor}}">{{id}}</a>
+                      </li>
+                    {{/each}}
+                  </ul>
+                </li>
+              {{/each}}
+            {{/isArray}}
+          </ul>
+        {{/hasContent}}
+    </li>
+  {{/each}}
 </ul>

assets/less/sidebar.less

@@ -207,6 +207,14 @@
       &.open > ul {
         display: block;
       }
+
+      &.nesting-context {
+        opacity: 0.6;
+      }
+
+      &.nested {
+        margin-left: 2ex;
+      }
     }
 
     li.group {