From 4f6c6c8513bd2cbc5e5fc392bb49477d8c8056c1 Mon Sep 17 00:00:00 2001 From: Jacques Erasmus Date: Sun, 28 Jul 2019 22:12:20 +0000 Subject: Add ability to collapse menu items Added the ability to collapse menu items --- content/assets/javascripts/closest-polyfill.js | 19 ++++ content/assets/javascripts/global-nav.js | 32 +++++++ content/assets/stylesheets/_variables.scss | 3 + content/assets/stylesheets/stylesheet.scss | 123 ++++++++++++++++++------- content/assets/stylesheets/toc.scss | 6 +- layouts/default.html | 1 + layouts/global_nav.html | 6 ++ layouts/head.html | 1 + 8 files changed, 154 insertions(+), 37 deletions(-) create mode 100644 content/assets/javascripts/closest-polyfill.js create mode 100644 content/assets/javascripts/global-nav.js 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.*' %> + 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] %> <% end %> +
active<% else %>collapsed<% end %>" data-toggle="collapse" aria-expanded="false" data-target="#<%= sec[:section_title].gsub(/[\s\/]/, '') %>">
<% if sec[:section_categories] %> +
show<% end %>" id="<%= sec[:section_title].delete(' ') %>"> <% sec[:section_categories].each do |cat| %> <% if cat[:external_url] %> @@ -40,10 +42,12 @@ <% end %> <% end %> +
active<% else %>collapsed<% end %>" data-toggle="collapse" aria-expanded="false" data-target="#<%= cat[:category_title].gsub(/[\s\/]/, '') %>">
 <% if cat[:docs] %> +
show<% end %>" id="<%= cat[:category_title].gsub(/[\s\/]/, '') %>"> <% cat[:docs].each do |doc| %> <% if doc[:external_url] %> @@ -69,8 +73,10 @@ <% end %> <% end %> +
<% end %> <% end %> +
<% end %> <% end %> 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 %> + -- cgit v1.2.3