Support 6 or 7 levels of nested items in the global nav

6 files changed, 126 insertions, 63 deletions

diff --git a/content/_data/navigation.yaml b/content/_data/navigation.yaml
index cc1f76b0..49c0cda6 100644
--- a/content/_data/navigation.yaml
+++ b/content/_data/navigation.yaml
@@ -1482,8 +1482,9 @@ sections:
                     doc_url: 'ee/ci/runners/build_cloud/linux_build_cloud.html'
                   - doc_title: macOS
                     doc_url: 'ee/ci/runners/build_cloud/macos_build_cloud.html'
-                  - doc_title: VM instances for macOS
-                    doc_url: 'ee/ci/runners/build_cloud/macos/environment.html'
+                    docs:
+                      - doc_title: VM instances for macOS
+                        doc_url: 'ee/ci/runners/build_cloud/macos/environment.html'
                   - doc_title: Windows
                     doc_url: 'ee/ci/runners/build_cloud/windows_build_cloud.html'
               - doc_title: The scope of runners
@@ -1511,8 +1512,9 @@ sections:
                     doc_url: 'runner/executors/kubernetes.html'
                   - doc_title: Shell
                     doc_url: 'runner/executors/shell.html'
-                  - doc_title: Supported shells
-                    doc_url: 'runner/shells/'
+                    docs:
+                      - doc_title: Supported shells
+                        doc_url: 'runner/shells/'
                   - doc_title: SSH
                     doc_url: 'runner/executors/ssh.html'
                   - doc_title: Parallels
@@ -1725,7 +1727,6 @@ sections:
                 docs:
                   - doc_title: Kubernetes Agent
                     doc_url: 'ee/user/clusters/agent/'
-                    docs:
               - doc_title: Cluster Management Project
                 doc_url: 'ee/user/clusters/management_project.html'
                 docs:
diff --git a/content/assets/stylesheets/_sidebar.scss b/content/assets/stylesheets/_sidebar.scss
index 74d14faa..595c8c9b 100644
--- a/content/assets/stylesheets/_sidebar.scss
+++ b/content/assets/stylesheets/_sidebar.scss
@@ -41,7 +41,9 @@ version: 2
       &.level-1,
       &.level-2,
       &.level-3,
-      &.level-4 {
+      &.level-4,
+      &.level-5,
+      &.level-6 {
         background-color: $gds-gray-200;
       }
     }
@@ -162,6 +164,22 @@ version: 2
     }
   }
 
+  .level-5 {
+    color: $global-nav-link-level4;
+    padding-left: 7.133rem;
+    &:visited {
+      color: $global-nav-link-level4;
+    }
+  }
+
+  .level-6 {
+    color: $global-nav-link-level4;
+    padding-left: 8.333rem;
+    &:visited {
+      color: $global-nav-link-level4;
+    }
+  }
+
   .global-nav-badges {
     fill: $gds-gray-700;
   }
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index 7bf8b84c..b7a78462 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -70,6 +70,8 @@ $global-nav-link-level1: $link-color-nav;
 $global-nav-link-level2: $link-color-nav;
 $global-nav-link-level3: $link-color-nav;
 $global-nav-link-level4: $link-color-nav;
+$global-nav-link-level5: $link-color-nav;
+$global-nav-link-level6: $link-color-nav;
 $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 5cf1db58..e73ab7c1 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 122
+version: 123
 ---
 
 @import 'variables';
diff --git a/layouts/global_nav.html b/layouts/global_nav.html
index 1d01ed1c..ebe49eaa 100644
--- a/layouts/global_nav.html
+++ b/layouts/global_nav.html
@@ -16,73 +16,115 @@
         <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 %>
-                  </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>
+            <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 %>
+                </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| %>
                     <% doc_uuid = SecureRandom.uuid %>
-                      <span class="nav-link">
-                        <% if doc.external_url %>
-                          <a class="global-nav-link level-2 <%= doc.has_children? ? 'has-collapse' : '' %>" href="<%= doc.url %>" target="_blank">
-                            <%= doc.title %>
-                          </a>
-                        <% else%>
-                          <a class="global-nav-link level-2 <%= doc.has_children? ? 'has-collapse' : '' %> <%= navigation.show_element?(doc) ? 'active' : '' %>" href="<%= navigation.element_href(doc) %>">
-                            <%= doc.title %>
-                          </a>
-                        <% end %><!-- end of if doc[:external_url] -->
-                        <div class="<%= doc.has_children? ? 'collapse-toggle' : '' %> <%= navigation.show_element?(doc) ? 'active' : 'collapsed' %>" data-toggle="collapse" aria-expanded="false" data-target="#doc_<%= doc_uuid %>"></div>
-                      </span>
+                    <span class="nav-link">
+                      <% if doc.external_url %>
+                        <a class="global-nav-link level-2 <%= doc.has_children? ? 'has-collapse' : '' %>" href="<%= doc.url %>" target="_blank">
+                          <%= doc.title %>
+                        </a>
+                      <% else%>
+                        <a class="global-nav-link level-2 <%= doc.has_children? ? 'has-collapse' : '' %> <%= navigation.show_element?(doc) ? 'active' : '' %>" href="<%= navigation.element_href(doc) %>">
+                          <%= doc.title %>
+                        </a>
+                      <% end %><!-- end of if doc[:external_url] -->
+                      <div class="<%= doc.has_children? ? 'collapse-toggle' : '' %> <%= navigation.show_element?(doc) ? 'active' : 'collapsed' %>" data-toggle="collapse" aria-expanded="false" data-target="#doc_<%= doc_uuid %>"></div>
+                    </span>
 
                       <!-- nav sub docs -->
                       <% if doc.has_children? %>
                         <div class="collapse <%= navigation.show_element?(doc) ? 'show' : '' %>" id="doc_<%= doc_uuid %>">
-                          <% doc.children.each do |doc| %>
+                          <% doc.children.each do |doc3| %>
                             <% doc_uuid = SecureRandom.uuid %>
-                          <span class="nav-link">
-                            <% if doc.external_url %>
-                              <a class="global-nav-link level-3 <%= doc.has_children? ? 'has-collapse' : '' %>" href="<%= doc.url %>" target="_blank">
-                                <%= doc.title %>
-                              </a>
-                            <% else%>
-                              <a class="global-nav-link level-3 <%= doc.has_children? ? 'has-collapse' : '' %> <%= navigation.show_element?(doc) ? 'active' : '' %>" href="<%= navigation.element_href(doc) %>">
-                                <%= doc.title %>
-                              </a>
-                            <% end %><!-- end of if doc[:external_url] -->
-                            <div class="<%= doc.has_children? ? 'collapse-toggle' : '' %> <%= navigation.show_element?(doc) ? 'active' : 'collapsed' %>" data-toggle="collapse" aria-expanded="false" data-target="#doc_<%= doc_uuid %>"></div>
-                          </span>
+                            <span class="nav-link">
+                              <% if doc3.external_url %>
+                                <a class="global-nav-link level-3 <%= doc3.has_children? ? 'has-collapse' : '' %>" href="<%= doc3.url %>" target="_blank">
+                                  <%= doc3.title %>
+                                </a>
+                              <% else%>
+                                <a class="global-nav-link level-3 <%= doc3.has_children? ? 'has-collapse' : '' %> <%= navigation.show_element?(doc3) ? 'active' : '' %>" href="<%= navigation.element_href(doc3) %>">
+                                  <%= doc3.title %>
+                                </a>
+                              <% end %><!-- end of if doc[:external_url] -->
+                              <div class="<%= doc3.has_children? ? 'collapse-toggle' : '' %> <%= navigation.show_element?(doc3) ? 'active' : 'collapsed' %>" data-toggle="collapse" aria-expanded="false" data-target="#doc_<%= doc_uuid %>"></div>
+                            </span>
 
-                          <!-- nav sub sub docs -->
-                          <% if doc.has_children? %>
-                            <div class="collapse <%= navigation.show_element?(doc) ? 'show' : '' %>" id="doc_<%= doc_uuid %>">
-                              <% doc.children.each do |doc| %>
-                              <span class="nav-link">
-                                <% if doc.external_url %>
-                                  <a class="global-nav-link level-4" href="<%= doc.url %>" target="_blank">
-                                    <%= doc.title %>
-                                  </a>
-                                <% else%>
-                                  <a class="global-nav-link level-4 <%= navigation.show_element?(doc) ? 'active' : '' %>" href="<%= navigation.element_href(doc) %>">
-                                    <%= doc.title %>
-                                  </a>
-                                <% end %><!-- end of if doc[:external_url] -->
-                              </span>
-                              <% end %><!-- end of docs[:doc] -->
-                            </div>
-                          <% end %><!-- end of if doc[:docs] -->
+                            <!-- nav sub sub docs -->
+                            <% if doc3.has_children? %>
+                              <div class="collapse <%= navigation.show_element?(doc3) ? 'show' : '' %>" id="doc_<%= doc_uuid %>">
+                                <% doc3.children.each do |doc4| %>
+                                  <% doc_uuid = SecureRandom.uuid %>
+                                  <span class="nav-link">
+                                    <% if doc4.external_url %>
+                                      <a class="global-nav-link level-4 <%= doc4.has_children? ? 'has-collapse' : '' %>" href="<%= doc4.url %>" target="_blank">
+                                        <%= doc4.title %>
+                                      </a>
+                                    <% else%>
+                                      <a class="global-nav-link level-4 <%= doc4.has_children? ? 'has-collapse' : '' %> <%= navigation.show_element?(doc4) ? 'active' : '' %>" href="<%= navigation.element_href(doc4) %>">
+                                        <%= doc4.title %>
+                                      </a>
+                                    <% end %><!-- end of if doc[:external_url] -->
+                                    <div class="<%= doc4.has_children? ? 'collapse-toggle' : '' %> <%= navigation.show_element?(doc4) ? 'active' : 'collapsed' %>" data-toggle="collapse" aria-expanded="false" data-target="#doc_<%= doc_uuid %>"></div>
+                                  </span>
+
+                                  <!-- nav sub sub docs -->
+                                  <% if doc4.has_children? %>
+                                    <div class="collapse <%= navigation.show_element?(doc4) ? 'show' : '' %>" id="doc_<%= doc_uuid %>">
+                                      <% doc4.children.each do |doc5| %>
+                                        <% doc_uuid = SecureRandom.uuid %>
+                                        <span class="nav-link">
+                                          <% if doc5.external_url %>
+                                            <a class="global-nav-link level-5 <%= doc5.has_children? ? 'has-collapse' : '' %>" href="<%= doc5.url %>" target="_blank">
+                                              <%= doc5.title %>
+                                            </a>
+                                          <% else%>
+                                            <a class="global-nav-link level-5 <%= doc5.has_children? ? 'has-collapse' : '' %> <%= navigation.show_element?(doc5) ? 'active' : '' %>" href="<%= navigation.element_href(doc5) %>">
+                                              <%= doc5.title %>
+                                            </a>
+                                          <% end %><!-- end of if doc[:external_url] -->
+                                          <div class="<%= doc5.has_children? ? 'collapse-toggle' : '' %> <%= navigation.show_element?(doc5) ? 'active' : 'collapsed' %>" data-toggle="collapse" aria-expanded="false" data-target="#doc_<%= doc_uuid %>"></div>
+                                        </span>
+
+                                        <!-- nav sub sub docs -->
+                                        <% if doc5.has_children? %>
+                                          <div class="collapse <%= navigation.show_element?(doc) ? 'show' : '' %>" id="doc_<%= doc_uuid %>">
+                                            <% doc5.children.each do |doc6| %>
+                                              <span class="nav-link">
+                                                <% if doc6.external_url %>
+                                                  <a class="global-nav-link level-6" href="<%= doc6.url %>" target="_blank">
+                                                    <%= doc6.title %>
+                                                  </a>
+                                                <% else%>
+                                                  <a class="global-nav-link level-6 <%= navigation.show_element?(doc6) ? 'active' : '' %>" href="<%= navigation.element_href(doc6) %>">
+                                                    <%= doc6.title %>
+                                                  </a>
+                                                <% end %><!-- end of if doc[:external_url] -->
+                                              </span>
+                                            <% end %><!-- end of docs[:doc] -->
+                                          </div>
+                                        <% end %><!-- end of if doc[:docs] -->
+                                      <% end %><!-- end of docs[:doc] -->
+                                    </div>
+                                  <% end %><!-- end of if doc[:docs] -->
+                                <% end %><!-- end of docs[:doc] -->
+                              </div>
+                            <% end %><!-- end of if doc[:docs] -->
                           <% end %><!-- end of docs[:doc] -->
                         </div>
                       <% end %><!-- end of if doc[:docs] -->
diff --git a/lib/gitlab/navigation/doc.rb b/lib/gitlab/navigation/doc.rb
index 27c75d7d..cdb3540c 100644
--- a/lib/gitlab/navigation/doc.rb
+++ b/lib/gitlab/navigation/doc.rb
@@ -30,7 +30,7 @@ module Gitlab
       end
 
       def children
-        @children ||= doc.fetch(:docs, []).map { |doc| Doc.new(doc) }
+        @children ||= doc.fetch(:docs, []).map { |nested_doc| Doc.new(nested_doc) }
       end
 
       private