Feat: Update left navigation to allow more levels415

7 files changed, 270 insertions, 209 deletions

diff --git a/content/assets/javascripts/global-nav.js b/content/assets/javascripts/global-nav.js
index f77a5aff..3b4fafda 100644
--- a/content/assets/javascripts/global-nav.js
+++ b/content/assets/javascripts/global-nav.js
@@ -3,6 +3,7 @@
   const activeMenuItem = menu.querySelector('.nav-link .active');
   const collapsedMenu = activeMenuItem ? activeMenuItem.closest('.collapse') : null;
 
+  bootstrapSidebar();
   expand(collapsedMenu);
   toggleSidebar();
 
@@ -36,15 +37,40 @@
   function toggleSidebar() {
     const mediaQuery = window.matchMedia('(max-width: 1099px)');
     const navWrapper = document.querySelector('.nav-wrapper');
+    const overlay = document.querySelector('.overlay');
     const main = document.querySelector('.main');
 
     if (mediaQuery.matches) {
       navWrapper.classList.remove('active');
       main.classList.remove('active');
+      overlay.classList.remove('active');
       return;
     }
 
     navWrapper.classList.add('active');
     main.classList.add('active');
   }
+
+  function bootstrapSidebar() {
+    if($('.global-nav ul.active').length > 0) {
+      $('.global-nav ul.active').parents('ul').addClass('active hidden');
+    }
+  }
+
+
+  $(".global-nav nav li a").click(function() {
+		const parentLevel = $(this).parents('ul').length -1;
+		const currentMenu = $(this).closest('ul');
+		const currentListItem = $(this).parent('li');
+		const parentMenu = $('.level-' + parentLevel);
+		const subMenu = $(this).next('ul');
+
+		if(currentListItem.hasClass('back')) {
+			currentMenu.removeClass('active');
+			parentMenu.removeClass('hidden');
+		} else if (currentListItem.children('ul').length > 0) {
+			subMenu.toggleClass('active');
+			currentMenu.addClass('hidden');
+		}
+	});
 })();
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index 0e60d241..41af4cc4 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -110,9 +110,9 @@ $link-color-nav: $gds-gray-800;
 $link-color-nav-hover: $gds-gray-900;
 
 // Global nav
-$global-nav-link-level0: $link-color-nav;
 $global-nav-link-level1: $link-color-nav;
-$global-nav-link-level2: $gds-gray-700;
+$global-nav-link-level2: $link-color-nav;
+$global-nav-link-level3: $gds-gray-700;
 $global-nav-link-shadow: $gds-gray-200;
 
 // Table of contents
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index c58c722d..08275a84 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 104
+version: 105
 ---
 
 @import "variables";
@@ -431,13 +431,29 @@ h6 {
     padding: 0 10px;
 
     &.active {
-      background-color: $bg-overlay-color;
       overflow: hidden;
       position: fixed;
     }
   }
 }
 
+.overlay {
+  display: none;
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background: $bg-overlay-color;
+  z-index: 1;
+  opacity: 0;
+  transition: all .5s ease-in-out;
+  @media (max-width: $md-width) {
+    &.active {
+      display: block;
+      opacity: 1;
+    }
+  }
+}
+
 // Override Bootstraps default button (for GDS colors)
 .btn-default {
   border-color: $gds-gray-300;
@@ -499,6 +515,130 @@ h6 {
       visibility: visible;
     }
   }
+  .global-nav {
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    visibility: hidden;
+    nav {
+      position: relative;
+      height: 100%;
+      margin-top: 5.75rem;
+      ul {
+        list-style: none;
+        position: absolute;
+        padding: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+        transition: all 1s cubic-bezier(.645, .045, .355, 1);
+        ul { 
+          right: calc(200% + 10px);
+          left: calc(100% + 10px);
+          &.active {
+            left: - calc(100% + 10px);
+            right: - calc(100% + 10px);
+          }
+        }
+        li {
+          &.parent > a {
+            &:after {
+              content: " >";
+            }
+          }
+          &.back {
+            a {
+              color: $global-nav-link-level1;
+              &:before {
+                content: "< ";
+              }
+              &:focus,
+              &:hover {
+                color: $global-nav-link-level1;
+              }
+            }
+          }
+          a {
+            line-height: 1rem;
+            font-size: .875rem;
+            text-shadow: 3px 3px 5px $link-color-bg-active;
+            padding: .75rem;
+            display: block;
+            position: relative;
+            border-radius: .25rem;
+            text-decoration: none;
+            transition: all 1s;
+            &:focus,
+            &:hover {
+              background-color: $link-color-bg-active;
+              color: $link-color-nav-hover;
+            }
+
+            &.active {
+              background-color: $gds-gray-100;
+              box-shadow: -4px 0 0 0 inset;
+              color: $gds-indigo-800;
+              &:hover {
+                color: $gds-indigo-800;
+                &.level-2,
+                &.level-3 {
+                  background-color: $gds-gray-200;
+                }
+              }
+            }
+          }
+        }
+        .active {
+          left: 0;
+          right: 0;
+          > li {
+            > a {
+              opacity: 1;
+            }
+          }
+        }
+        &.hidden {
+          >li > a {
+            opacity: 0;
+          }	
+        }
+      }
+    }
+    .level-1 {
+      a {
+        color: $global-nav-link-level1;
+        &:visited {
+          color: $global-nav-link-level1;
+        }
+      }
+    }
+    .level-2 {
+      a {
+        color: $global-nav-link-level2;
+        &:visited {
+          color: $global-nav-link-level2;
+        }
+      }
+    }
+    .level-3 {
+      a {
+        color: $global-nav-link-level3;
+        &:visited {
+          color: $global-nav-link-level3;
+        }
+      }
+    }
+    .global-nav-badges {
+      fill: $gds-gray-700;
+    }
+  
+    .last-updated {
+      color: $color-light-gray;
+      font-size: 13px;
+      padding-bottom: 10px;
+      text-align: right;
+    }
+  }
   .nav-toggle {
     width: 100%;
     height: 50px;
@@ -560,151 +700,6 @@ h6 {
   }
 }
 
-.global-nav {
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  overflow: auto;
-  visibility: hidden;
-  .global-nav-cat.active {
-    a {
-      color: $gds-indigo-800;
-    }
-  }
-  .global-nav-content {
-    margin-top: 85px;
-    margin-bottom: 70px;
-  }
-  a {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    padding-top: 7px;
-    padding-bottom: 7px;
-    padding-right: 7px;
-    &.has-collapse.active {
-      box-shadow: 0 0 0 0 inset;
-    }
-    &.active {
-      background-color: $gds-gray-100;
-      font-weight: 600;
-      box-shadow: -4px 0 0 0 inset;
-      color: $gds-indigo-800;
-      &:hover {
-        color: $gds-indigo-800;
-      }
-      &.level-1,
-      &.level-2 {
-        background-color: $gds-gray-200;
-      }
-    }
-  }
-  .collapse-toggle {
-    cursor: pointer;
-    display: flex;
-    padding-right: 1rem;
-    align-items: center;
-    justify-content: center;
-    &::after {
-      content: "";
-      border: solid $gds-gray-700;
-      border-width: 0 1px 1px 0;
-      display: inline-block;
-      transform: rotate(45deg);
-      width: 7px;
-      height: 7px;
-    }
-    &.collapsed {
-      &::after {
-        transform: rotate(-50deg);
-      }
-    }
-    &.active {
-      background-color: $gds-gray-200;
-      box-shadow: -4px 0 0 0 inset;
-      color: $gds-indigo-800;
-      &.section-title {
-        background-color: $gds-gray-100;
-      }
-    }
-  }
-
-  .global-nav-block {
-    font-weight: 600;
-    padding-left: 10px;
-  }
-
-  .global-nav-link,
-  .nav-link {
-    text-decoration: none;
-    &:hover {
-      color: $link-color-nav-hover;
-    }
-  }
-
-  .global-nav-link {
-    line-height: 1rem;
-    font-size: .875rem;
-    width: 100%;
-  }
-
-  .nav-link {
-    padding: 0;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .nav-link:hover {
-    background-color: $link-color-bg-active;
-  }
-
-  .global-nav-block-top {
-    font-weight: 600;
-    margin-bottom: 3px;
-    margin-top: 3px;
-    a {
-      text-decoration: none;
-      text-shadow: 3px 3px 5px $link-color-bg-active;
-    }
-  }
-
-  .level-0 {
-    color: $global-nav-link-level0;
-    padding-left: 18px;
-    &:visited {
-      color: $global-nav-link-level0;
-    }
-  }
-
-  .level-1 {
-    color: $global-nav-link-level1;
-    padding-left: 35px;
-    &:visited {
-      color: $global-nav-link-level1;
-    }
-  }
-
-  .level-2 {
-    color: $global-nav-link-level2;
-    padding-left: 53px;
-    &:visited {
-      color: $global-nav-link-level2;
-    }
-  }
-
-  .global-nav-badges {
-    fill: $gds-gray-700;
-  }
-
-  .last-updated {
-    color: $color-light-gray;
-    font-size: 13px;
-    padding-bottom: 10px;
-    text-align: right;
-  }
-}
-
 
 .btn-tanuki {
   &:hover {
diff --git a/content/frontend/default/default.js b/content/frontend/default/default.js
index fa6933be..9ac5e65a 100644
--- a/content/frontend/default/default.js
+++ b/content/frontend/default/default.js
@@ -36,7 +36,7 @@ document.addEventListener('DOMContentLoaded', () => {
     render(createElement) {
       return createElement(NavigationToggle, {
         props: {
-          targetSelector: ['.nav-wrapper', '.main'],
+          targetSelector: ['.nav-wrapper', '.overlay', '.main'],
         },
       });
     },
diff --git a/content/frontend/header/index.js b/content/frontend/header/index.js
index b6fe67d4..31b0f692 100644
--- a/content/frontend/header/index.js
+++ b/content/frontend/header/index.js
@@ -1,6 +1,10 @@
 document.addEventListener('DOMContentLoaded', () => {
   const mobileToggle = document.querySelector('.mobile-nav-toggle');
-  const classes = [document.querySelector('.main'), document.querySelector('.nav-wrapper')];
+  const classes = [
+    document.querySelector('.overlay'),
+    document.querySelector('.main'),
+    document.querySelector('.nav-wrapper'),
+  ];
   if (!mobileToggle) {
     return;
   }
diff --git a/layouts/default.html b/layouts/default.html
index 4893ac19..02ff552f 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -1,5 +1,3 @@
-
-
 <!DOCTYPE HTML>
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US" prefix="og: http://ogp.me/ns#">
   <head>
@@ -92,6 +90,7 @@
         <div class="col-3 py-3 d-none d-lg-flex">
           <div id="doc-nav" class="doc-nav w-100"></div>
         </div>
+        <div class="overlay"></div>
       </div>
     </section>
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
diff --git a/layouts/global_nav.html b/layouts/global_nav.html
index 6e94d93e..e45a713c 100644
--- a/layouts/global_nav.html
+++ b/layouts/global_nav.html
@@ -1,58 +1,95 @@
 <% navigation = Gitlab::Navigation.new(@items, @item) %>
 <nav class="global-nav-content">
-  <!-- nav sections -->
-  <% navigation.children.each do |sec| %>
-    <% sec_uuid = SecureRandom.uuid %>
-    <div class="global-nav-section">
-      <span class="global-nav-block-top nav-link">
-        <a class="global-nav-link level-0 <%= sec.has_children? ? 'has-collapse' : '' %> <%= navigation.show_element?(sec) ? 'active' : '' %>" href="<%= navigation.element_href(sec) %>">
-          <%= sec.title %>
-          <%= navigation.optional_ee_badge(sec) %>
-        </a>
-        <div class="section-title <%= sec.has_children? ? 'collapse-toggle': '' %> <%= navigation.show_element?(sec) ? 'active' : 'collapsed' %>" data-toggle="collapse" aria-expanded="false" data-target="#sec_<%= sec_uuid %>"></div>
-      </span>
-
-      <!-- nav categories -->
-      <% if sec.has_children? && sec.enabled  %>
-      <div class="collapse <%= navigation.show_element?(sec) ? 'show' : '' %>" id="sec_<%= sec_uuid %>">
-        <% sec.children.each do |cat| %>
-          <% cat_uuid = SecureRandom.uuid %>
-        <span class="global-nav-cat nav-link">
-          <% if cat.external_url %>
-          <a class="global-nav-link level-1 <%= cat.has_children? ? 'has-collapse' : '' %>" href="<%= cat.url %>" target="_blank">
-            <%= cat.title %>
-          </a>
-          <% else %>
-          <a class="global-nav-link level-1 <%= cat.has_children? ? 'has-collapse' : '' %> <%= navigation.show_element?(cat) ? 'active' : '' %>" href="<%= navigation.element_href(cat) %>">
-                <%= cat.title %>
-                <%= navigation.optional_ee_badge(cat) %>
-              </a>
-            <% end %><!-- end of if cat[:external_url] -->
-            <div class="<%= cat.has_children? ? 'collapse-toggle' : '' %> <%= navigation.show_element?(cat) ? 'active' : 'collapsed' %>" data-toggle="collapse" aria-expanded="false" data-target="#cat_<%= cat_uuid %>"></div>
-          </span>
-
-          <!-- nav docs -->
-          <% if cat.has_children? %>
-            <div class="collapse <%= navigation.show_element?(cat) ? 'show' : '' %>" id="cat_<%= cat_uuid %>">
-            <% cat.children.each do |doc| %>
-              <span class="nav-link">
-                <% if doc.external_url %>
-                  <a class="global-nav-link level-2" href="<%= doc.url %>" target="_blank">
-                    <%= doc.title %>
-                  </a>
-                <% else%>
-                  <a class="global-nav-link level-2 <%= navigation.show_element?(doc) ? 'active' : '' %>" href="<%= navigation.element_href(doc) %>">
-                    <%= doc.title %>
-                    <%= navigation.optional_ee_badge(doc) %>
-                  </a>
-                <% 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 of div class="collapse" -->
-      <% end %><!-- end of if sec[:section_categories].nil? -->
-    </div><!-- end of div class="global-nav-section" -->
-  <% end %><!-- end of nav_items[:sections] -->
-</nav>
+    <ul class="level-1">
+      <% navigation.children.each do |sec| %>
+        <% sec_uuid = SecureRandom.uuid %>
+        <% if !sec.has_children? %>
+          <li>
+            <a href="<%= navigation.element_href(sec) %>" class="<%= navigation.show_element?(sec) ? 'active' : '' %>">
+              <%= sec.title %><%= navigation.optional_ee_badge(sec) %>
+            </a>
+          </li>
+        <% end %>
+        <% if sec.has_children? && sec.enabled  %>
+          <li class="parent">
+            <a href="#">
+              <%= sec.title %>
+              <%= navigation.optional_ee_badge(sec) %>
+            </a>
+            <ul class="level-2 <%= navigation.show_element?(sec) ? 'active' : '' %>">
+              <li class="back">
+                <a href="#">
+                  Back
+                </a>
+              </li>
+              <li>
+                <a href="<%= navigation.element_href(sec) %>" class="<%= navigation.show_element?(sec) ? 'active' : '' %>">
+                  <strong>
+                    <%= sec.title %>
+                    <%= navigation.optional_ee_badge(sec) %>
+                  </strong>
+                </a>
+              </li>
+              <% sec.children.each do |cat| %>
+                <% cat_uuid = SecureRandom.uuid %>
+                <% if cat.external_url %>
+                  <li>
+                    <a href="<%= cat.url %>" target="_blank">
+                      <%= cat.title %>
+                    </a>
+                <% else %>
+                  <% if !cat.has_children? %>
+                    <li>
+                      <a href="<%= navigation.element_href(cat) %>" class="<%= navigation.show_element?(cat) ? 'active' : '' %>">
+                        <%= cat.title %>
+                        <%= navigation.optional_ee_badge(cat) %>
+                      </a>
+                    </li>
+                  <% end %>
+                  <% if cat.has_children? %>
+                    <li class="parent">
+                      <a href="#">
+                        <%= cat.title %>
+                        <%= navigation.optional_ee_badge(cat) %>
+                      </a>
+                      <ul class="level-3 <%= navigation.show_element?(cat) ? 'active' : '' %>">
+                        <li class="back">
+                          <a href="#">
+                            Back
+                          </a>
+                        </li>
+                        <li>
+                          <a href="<%= navigation.element_href(cat) %>" class="<%= navigation.show_element?(cat) ? 'active' : '' %>">
+                            <strong>
+                              <%= cat.title %>
+                              <%= navigation.optional_ee_badge(cat) %>
+                            </strong>
+                          </a>
+                        </li>
+                          <% cat.children.each do |doc| %>
+                            <% if doc.external_url %>
+                              <li>
+                                <a href="<%= doc.url %>" target="_blank">
+                                  <%= doc.title %>
+                                </a>
+                              </li>
+                            <% else%>
+                              <li>
+                                <a href="<%= navigation.element_href(doc) %>" class="<%= navigation.show_element?(doc) ? 'active' : '' %>">
+                                  <%= doc.title %>
+                                  <%= navigation.optional_ee_badge(doc) %>
+                                </a>
+                              </li>
+                            <% end %>
+                        <% end %>
+                      </ul>
+                    </li>
+                  <% end %>
+                <% end %>
+              <% end %>
+            </ul>
+          </li>
+        <% end %>
+      <% end %>
+    </ul>
+</nav>
\ No newline at end of file