refactor(header): add dropdown for development

Signed-off-by: Naylin Medina <[email protected]>
glpi-project · Sep 26, 2018 · b31cc78 · b31cc78
1 parent 0059409
commit b31cc78
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 7 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -36,15 +36,78 @@
                             <a class="color-type-secondary" href="{{ '/screenshots' | absolute_url }}">Screenshots</a>
                         </li>
 
-                        <li class="dropdown" data-proofer-ignore>
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Development<i class="glyph glyph-chevron-down-2"></i></a>
+                        <li class="dropdown">
+                            <a
+                              href="#"
+                              class="dropdown-toggle"
+                              data-toggle="dropdown"
+                              role="button"
+                              aria-expanded="false"
+                              aria-label="Development"
+                            >
+                              Development <i class="glyph glyph-chevron-down-2"></i>
+                            </a>
                             <ul class="dropdown-menu" role="menu">
-                                <li><a href="{{ 'development/code-documentation/' | absolute_url }}">Code documentation</a></li>
-                                <li class="divider"></li>
-                                <li><a href="{{ 'development/coverage/' | absolute_url }}">Coverage</a></li>
-                                <li><a href="{{ 'development/test-reports/' | absolute_url }}">Test report</a></li>
+                              <li class="dropdown-submenu">
+                                <a
+                                  href="#"
+                                  class="dropdown-toggle"
+                                  data-toggle="dropdown"
+                                  aria-label="Code documentation"
+                                >
+                                  Code documentation <i class="glyph glyph-chevron-down-2"></i>
+                                </a>
+                                <ul class="dropdown-menu">
+                                  <li><a href="{{ '/development/code-documentation/develop' | absolute_url }}">Develop</a></li>
+                                  <li><a href="{{ '/development/code-documentation/master' | absolute_url }}">Master</a></li>
+                                  {% for version in site.data.whitelist_version %}
+                                    <li>
+                                      <a href="{{ 'development/code-documentation/support/' | absolute_url }}{{ version }}">{{ version }}</a>
+                                    </li>
+                                  {% endfor %}
+                                </ul>
+                              </li>
+                              <li class="divider"></li>
+                              <li class="dropdown-submenu">
+                                <a
+                                  href="#"
+                                  class="dropdown-toggle"
+                                  data-toggle="dropdown"
+                                  aria-label="Coverage"
+                                >
+                                  Coverage<i class="glyph glyph-chevron-down-2"></i>
+                                </a>
+                                <ul class="dropdown-menu">
+                                  <li><a href="{{ '/development/coverage/develop/' | absolute_url }}">Develop</a></li>
+                                    <li><a href="{{ '/development/coverage/master/' | absolute_url }}">Master</a></li>
+                                    {% for version in site.data.whitelist_version %}
+                                      <li>
+                                        <a href="{{ 'development/coverage/support/' | absolute_url }}">{{ version }}</a>
+                                      </li>
+                                    {% endfor %}
+                                </ul>
+                              </li>
+                              <li class="dropdown-submenu">
+                                <a
+                                  href="#"
+                                  class="dropdown-toggle"
+                                  data-toggle="dropdown"
+                                  aria-label="Coverage"
+                                >
+                                  Test Report<i class="glyph glyph-chevron-down-2"></i>
+                                </a>
+                                <ul class="dropdown-menu">
+                                  <li><a href="{{ '/development/test-report/develop/' | absolute_url }}">Develop</a></li>
+                                    <li><a href="{{ '/development/test-report/master/' | absolute_url }}">Master</a></li>
+                                    {% for version in site.data.whitelist_version %}
+                                      <li>
+                                        <a href="{{ 'development/test-report/support/' | absolute_url }}">{{ version }}</a>
+                                      </li>
+                                    {% endfor %}
+                                </ul>
+                              </li>
                             </ul>
-                        </li>
+                          </li>
 
                         <li>
                             <a class="color-type-secondary" href="{{ '/howtos' | absolute_url }}">How-tos</a>

diff --git a/_sass/_header.scss b/_sass/_header.scss
@@ -7,6 +7,30 @@ header {
     }
   }
 
+  .dropdown-submenu {
+    display: list-item;
+    position: relative;
+
+    &>.dropdown-menu {
+      left: 100%;
+      margin-top: -52px;
+      top: 0;
+    }
+
+    .pull-left {
+      float: none;
+
+      &>.dropdown-menu {
+        left: -100%;
+      }
+    }
+
+    i {
+      font-size: 6px;
+      line-height: 15px;
+    }
+  }
+
   @media (max-width: 1084px) {
     .logo {
       height: 30px;

diff --git a/js/app.js b/js/app.js
@@ -149,6 +149,13 @@
         });
     })();
 
+    // Dropdown sub-menu
+    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function toggleDropdownMenu(event) {
+        event.preventDefault()
+        event.stopPropagation()
+        $(this).parent().siblings().removeClass('open')
+        $(this).parent().toggleClass('open')
+    })
 
     // Tooltips
     $('[data-toggle="tooltip"]').tooltip({