Restyle TOC page navigation

- Flattens nested ul's
- Styles the nav-links

3 files changed, 91 insertions, 50 deletions

diff --git a/content/assets/javascripts/docs.js b/content/assets/javascripts/docs.js
index 018c0bb2..b829c273 100644
--- a/content/assets/javascripts/docs.js
+++ b/content/assets/javascripts/docs.js
@@ -1,5 +1,5 @@
 ---
-version: 1
+version: 2
 ---
 
 var NAV_INLINE_BREAKPOINT = 1100;
@@ -33,11 +33,29 @@ function toggleNavigation() {
   nav.classList.toggle('active');
 }
 
+function getAncestorsMatching(el, root, fn, count = 0) {
+  if (!el || el === root) {
+    return count;
+  } else {
+    const nextCount = fn(el) ? count + 1 : count;
+
+    return getAncestorsMatching(el.parentElement, root, fn, nextCount);
+  }
+}
+
+function isUlElement(el) {
+  return el && el.tagName === 'UL';  
+}
+
+function getUlAncestorsCount(el, root) {
+  return getAncestorsMatching(el, root, isUlElement);
+}
+
 // move document nav to sidebar
 (function() {
   var timeofday = document.getElementById('timeofday');
-  var tocList = document.querySelector('.js-article-content > ul#markdown-toc');
-  var main = document.querySelector('.js-main-wrapper');
+  var menu = document.querySelector('.js-article-content > ul#markdown-toc');
+  var main = document.querySelector('.js-main-wrapper')
 
   // Set timeofday var depending on the time //
 
@@ -59,24 +77,42 @@ function toggleNavigation() {
   }
 
   // if the document has a top level nav
-  if (tocList) {
+  if (menu) {
     // append to the sidebar
     var sidebar = document.getElementById('doc-nav');
+    var sidebarContentHeight = 0;
+    var sidebarContent = document.createElement('div');
+    sidebarContent.id = 'doc-nav-content';
+    sidebarContent.classList.add('doc-nav-content');
 
     if (sidebar) {
       // if there are items
-      if (tocList.children.length >= 1) {
-        var menu = tocList;
-        $(tocList).addClass('nav nav-pills flex-column');
-        $(tocList).find('ul').addClass('nav nav-pills flex-column');
-        $(tocList).find('a').addClass('nav-link');
+      if (menu.children.length >= 1) {
+        $(menu).addClass('nav nav-pills flex-column indigo-border-nav');
+        $(menu).find('a').addClass('nav-link');
+        $(menu).find('ul').addClass('nav nav-pills flex-column');
+        // We're about to flatten the nested li's so let's add paddings to the nav links
+        menu.querySelectorAll('li li .nav-link').forEach(navLink => {
+          const nestingLevel = getUlAncestorsCount(navLink, menu);
+          const padding = nestingLevel * 25;
+          navLink.style.paddingLeft = `${padding}px`;
+        });
+        // Add all nested li's as top-level children
+        menu.querySelectorAll('li').forEach(li => {
+          menu.appendChild(li);
+        });
+        // Remove ul's which have been emptied now
+        menu.querySelectorAll('ul').forEach(ul => {
+          ul.remove();
+        });
 
         // grab the h1's li anchor text
         var title = document.createElement('h4');
-        title.innerHTML = 'On this page:';
+        title.classList.add('border-bottom-0', 'font-weight-bold', 'mb-0', 'pb-0');
+        title.innerHTML = 'On this page';
 
         // add the text as a title
-        menu.insertBefore(title, menu.children[0]);
+        sidebarContent.appendChild(title);
 
         var hasHelpSection = document.getElementById('help-and-feedback');
 
@@ -94,11 +130,10 @@ function toggleNavigation() {
           menu.insertBefore(separator, menu.children[menu.children.length]);
           menu.insertBefore(listItem, menu.children[menu.children.length]);
         }
+        
+        sidebarContent.appendChild(menu);
+        sidebar.appendChild(sidebarContent);
 
-        sidebar.appendChild(menu);
-
-        var sidebarContent = sidebar.querySelector('ul');
-        var sidebarContentHeight = 0;
 
         // remove whitespace between elements to prevent list spacing issues
         sidebarContent.innerHTML = sidebarContent.innerHTML.replace(
diff --git a/content/assets/stylesheets/toc.scss b/content/assets/stylesheets/toc.scss
index 3baf560d..5a7ec0c4 100644
--- a/content/assets/stylesheets/toc.scss
+++ b/content/assets/stylesheets/toc.scss
@@ -1,5 +1,5 @@
 ---
-version: 7
+version: 8
 ---
 
 @import "variables";
@@ -14,48 +14,54 @@ version: 7
     padding-bottom: 5px;
     font-size: 16px;
   }
+}
 
-  > ul {
-    position: relative;
-    padding: 16px 8px;
-    margin-top: 60px;
+.doc-nav-content {
+  position: relative;
+  padding: 16px 8px;
+  margin-top: 60px;
 
-    li {
-      list-style: none;
+  li {
+    list-style: none;
 
-      &::before {
-        content: "›";
-        margin-right: 8px;
-      }
+    > a {
+      font-size: 14px;
+      color: $toc-link-color;
+      display: inline;
+      padding: 3px 7px;
 
-      > a {
-        font-size: 14px;
-        color: $toc-link-color;
-        display: inline;
-        padding: 3px 7px;
-
-        &:hover {
-          color: $link-color-nav-hover;
-          text-decoration: underline;
-          background-color: transparent;
-          box-shadow: none;
-        }
-      }
-      .nav-link.active {
-        font-weight: 600;
-        color: $link-color-nav;
+      &:hover {
+        color: $link-color-nav-hover;
         background-color: transparent;
+        box-shadow: none;
+      }
+    }
+    .nav-link.active {
+      font-weight: 600;
+      color: $link-color-nav;
+      background-color: transparent;
 
-        &:hover, &:only-child {
-          color: $link-color-nav-hover;
-          text-decoration: underline;
-          background-color: transparent;
-        }
+      &:hover, &:only-child {
+        color: $link-color-nav-hover;
+        background-color: transparent;
       }
     }
   }
 }
 
+.indigo-border-nav {
+  .nav-link {
+    display: block;
+    border-left: 4px solid $gds-indigo-50;
+    border-radius: 0;
+    padding-left: 8px;
+
+    &.active {
+      border-left-color: $gds-indigo-600;
+    }
+  }
+}
+
 .markdown-toc {
   padding-left: 16px;
 }
@@ -112,7 +118,7 @@ version: 7
     }
     // ToC toggle button
 
-    > ul {
+    .doc-nav-content {
       margin: 0;
     }
   }
diff --git a/layouts/default.html b/layouts/default.html
index 999eaae0..51c3fbd2 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -30,11 +30,11 @@
             <li class="breadcrumb"><%= @item.key?(:title) ? "#{@item[:title]}" : "Current page" %></li>
           </ul>
           <div id="doc-nav" class="doc-nav">
-            <a class="toc-collapse" data-toggle="collapse" href="#markdown-toc" aria-expanded="true" aria-controls="markdown-toc"></a>
+            <a class="toc-collapse" data-toggle="collapse" href="#doc-nav-content" aria-expanded="true" aria-controls="doc-nav-content"></a>
           </div>
         <% else %>
           <div id="doc-nav" class="doc-nav toc-no-breadcrumbs">
-            <a class="toc-collapse" role="button" data-toggle="collapse" href="#markdown-toc" aria-expanded="true" aria-controls="markdown-toc"></a>
+            <a class="toc-collapse" role="button" data-toggle="collapse" href="#doc-nav-content" aria-expanded="true" aria-controls="doc-nav-content"></a>
           </div>
         <% end %>
       <% end %>