Section page displays subsection details links

lib/app/js/controllers/sections.js

@@ -37,6 +37,10 @@ angular.module('sgApp')
       }
     }
 
+    $scope.isMainSection = function(section) {
+      return section.reference.indexOf('.') === -1;
+    };
+
     $scope.isEmptyMainSection = function(section) {
       return section.reference.indexOf('.') === -1 && !section.renderMarkup && (!section.modifiers || section.modifiers.length === 0);
     };

lib/app/views/main.html

@@ -55,6 +55,7 @@ <h1 ng-if="status.hasError">Error: {{status.error.name}}</h1>
           </a>
         </li>
       </ul>
+    </li>
   </ul>
 </nav>
 

lib/app/views/sections.html

@@ -1,4 +1,31 @@
 <article
   sg-section
   ng-repeat="section in sections.data | filter: filterSections | filter: search">
-</article>
+</article>
+<div ng-repeat="section in sections.data | filter: filterMainSections()" ng-if="isMainSection(section) && isActive(section)">
+  <a class="sg"
+      ng-class="{ 'active': (currentSection === section.reference), 'sub-active': (currentSection.indexOf(section.reference + '.') === 0) }"
+    ng-click="clearSearch()"
+    ui-sref="app.index.section({section: section.reference})">
+  </a>
+  <ul>
+    <li ng-repeat="subsection in sections.data | filter: filterSubsections(section)">
+      <a class="sg"
+        ng-class="currentSection === subsection.reference ? 'active' : ''"
+        ng-click="clearSearch()"
+        ui-sref="app.index.section({section: subsection.reference})">
+        <span class="sg-ref">{{ subsection.reference }}</span> <span ng-bind-html="subsection.header | unsafe"></span>
+        <ul class="sg-nav-subsubsection">
+          <li ng-repeat="subsubsection in sections.data | filter: filterSubsections(subsection)">
+            <a class="sg"
+              ng-class="currentSection === subsubsection.reference ? 'active' : ''"
+              ng-click="clearSearch()"
+              ui-sref="app.index.section({section: subsubsection.reference})">
+              <span class="sg-ref">{{ subsubsection.reference }}</span> <span ng-bind-html="subsubsection.header | unsafe"></span>
+            </a>
+          </li>
+        </ul>
+      </a>
+    </li>
+  </ul>
+</div>

test/angular/unit/controllers/sections.test.js

@@ -87,6 +87,16 @@ describe('SectionsCtrl', function() {
   });
 
   describe('empty main section detection', function() {
+    it('should return true if main section', function() {
+      var section = {
+        header: 'Section header text',
+        reference: '1',
+        renderMarkup: '',
+        markup: ''
+      };
+      expect(scope.isMainSection(section)).to.eql(true);
+    });
+
     it('should return true for empty main sections', function() {
       var section = {
         header: 'Section header text',