Add ability to collapse menu items

Added the ability to collapse menu items

8 files changed, 154 insertions, 37 deletions

diff --git a/content/assets/javascripts/closest-polyfill.js b/content/assets/javascripts/closest-polyfill.js
new file mode 100644
index 00000000..6a10a113
--- /dev/null
+++ b/content/assets/javascripts/closest-polyfill.js
@@ -0,0 +1,19 @@
+/*
+ * Polyfill for browsers that do not support Element.closest()
+ */
+if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+    Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    var el = this;
+
+    do {
+      if (el.matches(s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  };
+}
diff --git a/content/assets/javascripts/global-nav.js b/content/assets/javascripts/global-nav.js
new file mode 100644
index 00000000..010e9045
--- /dev/null
+++ b/content/assets/javascripts/global-nav.js
@@ -0,0 +1,32 @@
+(function() {
+  const menu = document.getElementById('global-nav');
+  const activeMenuItem = menu.querySelector('.nav-link .active');
+  const collapsedMenu = activeMenuItem.closest('.collapse');
+
+  expand(collapsedMenu);
+
+  // Expands the menu tree for the selected menu item
+  function expand(menu) {
+
+    if(!menu) {
+      return;
+    }
+
+    const collapseToggle = menu.previousElementSibling.querySelector('.collapse-toggle');
+
+    menu.previousElementSibling.classList.add('active');
+    menu.classList.add('show');
+
+    if(collapseToggle) {
+      collapseToggle.classList.remove('collapsed');
+      collapseToggle.setAttribute('aria-expanded', true);
+    }
+
+    if(menu.parentElement.classList.contains('collapse')) {
+      // This will traverse up until all parents are expanded
+      expand(menu.parentElement);
+    } else if (menu.parentElement.classList.contains('global-nav-section')) {
+      menu.parentElement.classList.add('expanded');
+    }
+  };
+})();
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index 964eb044..db3fbedd 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -59,6 +59,9 @@ $gds-blue-500: #1f78d1;
 $gds-blue-600: #1b69b6;
 $gds-blue-700: #17599c;
 $gds-blue-800: #134a81;
+
+// Indigo palatte
+$gds-indigo-800: #393982;
 //// end of GitLab Design System's colors ////
 
 //// Colors conforming with GDS ////
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 30c43b3c..85321a29 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -447,31 +447,88 @@ li {
 .global-nav {
   height: 100%;
   width: 15%;
+  max-width: 220px;
   position: fixed;
-  z-index: 1;
+  z-index: 2;
   top: 0;
   left: 0;
-  overflow: scroll;
+  overflow: auto;
   margin-top: 56px;
   padding-top: 15px;
-  padding-left: 3px;
+  background: $gds-gray-50;
+  border-right: 1px solid $gds-gray-200;
+
+  .global-nav-section {
+    &.expanded {
+      background-color: $gds-gray-100;
+      box-shadow: inset 4px 0 0 $gds-indigo-800;
+    }
+  }
+
+  .global-nav-cat.active {
+    a {
+      color: $gds-indigo-800;
+    }
+  }
 
   .global-nav-content {
     margin-bottom: 70px;
   }
 
   a {
-    display: block;
+    display: flex;
+    align-items: center;
     text-decoration: none;
+    padding-top: 7px;
+    padding-bottom: 7px;
+    padding-right: 7px;
 
     &.active {
-      background-color: $link-color-bg-active;
+      background-color: $gds-gray-100;
       font-weight: 600;
-      border-left: 3px solid;
-      color: $link-color-nav;
+      border-left: 4px solid;
+      color: $gds-indigo-800;
 
       &:hover {
-        color: $link-color-nav;
+        color: $gds-indigo-800;
+      }
+
+      &.level-1, &.level-2 {
+        background-color: $gds-gray-200;
+      }
+    }
+  }
+
+  .collapse-toggle {
+    cursor: pointer;
+    float: right;
+    width: 26px;
+    height: 36px;
+    display: flex;
+    padding-right: 10px;
+    align-items: center;
+    justify-content: center;
+
+    &::after {
+      content: "";
+      border: solid $gds-gray-700;
+      border-width: 0 1px 1px 0;
+      display: inline-block;
+      transform: rotate(-135deg);
+      width: 7px;
+      height: 7px;
+    }
+
+    &.collapsed {
+      &::after {
+        transform: rotate(45deg);
+      }
+    }
+
+    &.active {
+      background-color: $gds-gray-200;
+      &.section-title {
+        background-color: $gds-gray-100;
       }
     }
   }
@@ -492,8 +549,6 @@ li {
 
 // scss-lint:disable QualifyingElement
 a.global-nav-link, .nav-link {
-  padding-top: 1px;
-  padding-bottom: 1px;
   text-decoration: none;
 
   &:hover {
@@ -501,13 +556,20 @@ a.global-nav-link, .nav-link {
   }
 }
 
+a.global-nav-link {
+  line-height: 1.25;
+  font-size: 14px;
+  width: 100%;
+}
+
 .nav-link {
   padding: 0;
+  display: flex;
+  justify-content: space-between;
 }
 
 .nav-link:hover {
   background-color: $link-color-bg-active;
-  box-shadow: 1px 1px 2px $global-nav-link-shadow;
 }
 // scss-lint:enable QualifyingElement
 
@@ -524,53 +586,46 @@ a.global-nav-link, .nav-link {
 
 // use these classes to add color and padding-left to the nav links
 .level-0 {
-  padding-left: 10px;
   color: $global-nav-link-level0;
-
-  &.active {
-    padding-left: 7px; // 10 - 3px of border
-  }
+  padding-left: 18px;
 
   &:visited {
     color: $global-nav-link-level0;
   }
+
+  &.active {
+    padding-left: 14px;
+  }
 }
 
 .level-1 {
-  padding-left: 20px;
   color: $global-nav-link-level1;
-
-  &.active {
-    padding-left: 17px; // 20 - 3px of border
-  }
+  padding-left: 35px;
 
   &:visited {
     color: $global-nav-link-level1;
   }
+
+  &.active {
+    padding-left: 31px;
+  }
 }
 
 .level-2 {
-  padding-left: 36px;
   color: $global-nav-link-level2;
-  font-size: 14px;
-
-  &.active {
-    padding-left: 33px; // 36 - 3px of border
-  }
+  padding-left: 53px;
 
   &:visited {
     color: $global-nav-link-level2;
   }
+
+  &.active {
+    padding-left: 49px;
+  }
 }
 
 .global-nav-badges {
-  color: $global-nav-link-level2;
-  opacity: .4;
-  transition: opacity .3s;
-
-  &:hover {
-    opacity: 1;
-  }
+  color: $gds-gray-700;
 }
 //end of global-nav
 
diff --git a/content/assets/stylesheets/toc.scss b/content/assets/stylesheets/toc.scss
index e5fd0002..82ffbc9c 100644
--- a/content/assets/stylesheets/toc.scss
+++ b/content/assets/stylesheets/toc.scss
@@ -182,9 +182,9 @@ version: 6
   $doc-nav-width: 21%;
 
   .main.class.has-toc {
-    width: 60vw;
-    max-width: 60vw;
-    margin: auto 18%;
+    width: 64vw;
+    max-width: 64vw;
+    margin: auto 13%;
   }
 
   .doc-nav {
diff --git a/layouts/default.html b/layouts/default.html
index 7355bc93..15766f61 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -82,5 +82,6 @@
   <% end %>
   <%= render '/footer.*' %>
   <script src="<%= @items['/assets/javascripts/docs.*'].path %>"></script>
+  <script src="<%= @items['/assets/javascripts/global-nav.*'].path %>"></script>
 </body>
 </html>
diff --git a/layouts/global_nav.html b/layouts/global_nav.html
index 73363ec4..9d856262 100644
--- a/layouts/global_nav.html
+++ b/layouts/global_nav.html
@@ -13,10 +13,12 @@
             <%= sec[:section_title] %>
           </a>
         <% end %><!-- end of if dir -->
+        <div class="section-title <% if sec[:section_categories] %>collapse-toggle<% end %> <% if @item.path == "/#{dir}/#{sec[:section_url]}" %>active<% else %>collapsed<% end %>" data-toggle="collapse" aria-expanded="false" data-target="#<%= sec[:section_title].gsub(/[\s\/]/, '') %>"></div>
       </span>
 
       <!-- nav categories -->
       <% if sec[:section_categories] %>
+      <div class="collapse <% if @item.path == "/#{dir}/#{sec[:section_url]}" %>show<% end %>" id="<%= sec[:section_title].delete(' ') %>">
         <% sec[:section_categories].each do |cat| %>
           <span class="global-nav-cat nav-link">
             <% if cat[:external_url] %>
@@ -40,10 +42,12 @@
                 </a>
               <% end %><!-- end of if dir != 'ce' -->
             <% end %><!-- end of if cat[:external_url] -->
+            <div class="<% if cat[:docs] %>collapse-toggle<% end %> <% if @item.path == "/#{dir}/#{cat[:category_url]}" %>active<% else %>collapsed<% end %>" data-toggle="collapse" aria-expanded="false" data-target="#<%= cat[:category_title].gsub(/[\s\/]/, '') %>"></div>
           </span>
 
           <!-- nav docs -->
           <% if cat[:docs] %>
+            <div class="collapse <% if @item.path == "/#{dir}/#{cat[:category_url]}" %>show<% end %>" id="<%= cat[:category_title].gsub(/[\s\/]/, '') %>">
             <% cat[:docs].each do |doc| %>
               <span class="nav-link">
                 <% if doc[:external_url] %>
@@ -69,8 +73,10 @@
                 <% end %><!-- end of if doc[:external_url] -->
               </span>
             <% end %><!-- end of cat[:docs] -->
+            </div>
           <% end %><!-- end of if cat[:docs].nil? -->
         <% end %><!-- end of sec[:section_categories] -->
+      </div>
       <% end %><!-- end of if sec[:section_categories].nil? -->
     </div><!-- end of div class="global-nav-section" -->
   <% end %><!-- end of @items['/_data/global-nav.yaml'] -->
diff --git a/layouts/head.html b/layouts/head.html
index 4b085a82..16981378 100644
--- a/layouts/head.html
+++ b/layouts/head.html
@@ -43,6 +43,7 @@
 <% end %>
 
 <script async src="<%= @items['/assets/javascripts/classlist-polyfill.*'].path %>"></script>
+<script async src="<%= @items['/assets/javascripts/closest-polyfill.*'].path %>"></script>
 <!-- you don't need to keep this, but it's cool for stats! -->
 <meta name="generator" content="Nanoc <%= Nanoc::VERSION %>">
 <!-- Algolia Searching from the URL bar https://www.algolia.com/doc/tutorials/search-ui/ux-patterns/search-from-the-url-bar/ -->