Fix styling issues of meganav on small screens

scss/_patterns_navigation-reduced.scss

@@ -30,6 +30,12 @@
       font-weight: $font-weight-regular-text;
     }
 
+    // reduced padding on small screens
+    .p-navigation__link {
+      padding-bottom: $spv--medium;
+      padding-top: $spv--medium;
+    }
+
     // links in the banner (Menu toggle, search toggle) use muted text colour
     .p-navigation__banner .p-navigation__link {
       color: $colors--theme--text-muted;
@@ -82,6 +88,7 @@
       // use muted icon to align with text colour
       &::after {
         @include vf-icon-search-muted;
+        top: calc($spv--medium + map-get($nudges, x-small));
       }
 
       // search label is always hidden in reduced navigation

scss/_patterns_navigation.scss

@@ -8,12 +8,18 @@ $navigation-logo-size: 1rem;
 $navigation-logo-padding: calc(1.5rem + 0.1rem); // ~25.6px to align better with logos as originally designed in SVG
 $sph-navigation-link: 0.3rem;
 $spv-navigation-logo-bottom-position: 0.25rem; // 4px when 1rem is 16px
+$navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large); // navigation bar height based on line height and paddings
 
 @mixin vf-p-navigation {
   // placeholders
   %navigation-link-responsive-padding-vertical {
-    padding-bottom: $spv--large;
-    padding-top: $spv--large;
+    padding-bottom: $spv--medium;
+    padding-top: $spv--medium;
+
+    @media (min-width: $breakpoint-navigation-threshold) {
+      padding-bottom: $spv--large;
+      padding-top: $spv--large;
+    }
   }
 
   %navigation-link-responsive-padding-left {
@@ -298,7 +304,8 @@ $spv-navigation-logo-bottom-position: 0.25rem; // 4px when 1rem is 16px
     .p-navigation__link--menu-toggle {
       // reset padding for navigation links in the navigation banner
       @extend %navigation-link-responsive-padding-horizontal;
-      @extend %navigation-link-responsive-padding-vertical;
+      padding-bottom: $spv--large;
+      padding-top: $spv--large;
 
       // remove navigation separator for navigation links in the navigation banner
       &::before {
@@ -564,12 +571,8 @@ $spv-navigation-logo-bottom-position: 0.25rem; // 4px when 1rem is 16px
       position: absolute;
       right: calc($sph--large / 2);
       text-indent: calc(100% + 10rem);
-      top: calc($spv--medium + map-get($nudges, x-small));
+      top: calc($spv--large + map-get($nudges, x-small));
       width: map-get($icon-sizes, default);
-
-      @media (min-width: $breakpoint-navigation-threshold) {
-        top: calc($spv--large + map-get($nudges, x-small));
-      }
     }
   }
 
@@ -746,10 +749,6 @@ $spv-navigation-logo-bottom-position: 0.25rem; // 4px when 1rem is 16px
       // increase padding to accommodate chevron icon
       padding-right: calc(2 * $sph--small + map-get($icon-sizes, default));
     }
-
-    &:first-child .p-navigation__link::before {
-      content: none;
-    }
   }
 
   .p-navigation--reduced .p-navigation__dropdown.is-full-width,
@@ -861,7 +860,7 @@ $spv-navigation-logo-bottom-position: 0.25rem; // 4px when 1rem is 16px
     }
     .p-navigation__nav {
       display: block;
-      height: 100vh;
+      height: calc(100vh - $navigation-height);
       overflow-x: hidden;
 
       .p-navigation__items {
@@ -888,12 +887,17 @@ $spv-navigation-logo-bottom-position: 0.25rem; // 4px when 1rem is 16px
   .p-navigation--sliding .p-navigation__dropdown,
   .p-navigation--reduced .p-navigation__dropdown {
     display: block;
-    height: 100vh;
+    height: calc(100vh - $navigation-height);
     left: 100vw;
     position: absolute;
     top: 0;
     transition: transform $sliding-nav-animation-settings;
 
+    // set background of child elements to properly cover parent dropdown levels when scrolling
+    & > * {
+      background: $colors--theme--background-default;
+    }
+
     @media (min-width: $breakpoint-navigation-threshold) {
       display: none;
       height: auto;
@@ -902,8 +906,9 @@ $spv-navigation-logo-bottom-position: 0.25rem; // 4px when 1rem is 16px
       top: unset;
     }
 
+    // overlay to create fade out effect on parent level
     &::before {
-      box-shadow: -100vw 15px 0 15px black;
+      box-shadow: -100vw 0 0 0 $colors--light-theme--background-overlay;
       content: '';
       height: 100%;
       opacity: 0;
@@ -916,10 +921,14 @@ $spv-navigation-logo-bottom-position: 0.25rem; // 4px when 1rem is 16px
       }
     }
 
+    &[aria-hidden='true'] {
+      overflow: hidden; // prevent scrolling when dropdown is off screen
+    }
+
     &[aria-hidden='false'],
     &:not([aria-hidden]) {
       &::before {
-        @include vf-themed-property(opacity, 0.33, 0.75);
+        opacity: 1;
       }
 
       display: block;
@@ -975,6 +984,30 @@ $spv-navigation-logo-bottom-position: 0.25rem; // 4px when 1rem is 16px
 
   .p-navigation--sliding,
   .p-navigation--reduced {
+    // FIXME
+    // We want to add some additional spacing on the bottom of the sliding dropdowns
+    // so that the last item is not directly at the bottom of the screen when scrolling,
+    // but because of the way it's currently implemented, the only way to achieve this
+    // is to add padding to the last item in the dropdown.
+    // This is a temporary solution until we can find a better way to implement this, but
+    // it may require bigger restructuring of the sliding navigation.
+
+    // top (1st) level navigation dropdown
+    .p-navigation__nav .p-navigation__items,
+    // 2nd level navigation dropdown (that has separate mobile and desktop versions)
+    .p-navigation__dropdown-content--sliding,
+    // further nested levels
+    // (because of some weird style combination we have to select last child instead of adding padding on dropdown container itself)
+    .p-navigation__dropdown > :last-child {
+      // should be enough to make some space at the bottom
+      // and workaround the issues of 100vh not taking address toolbar into account
+      padding-bottom: 3rem;
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        padding-bottom: 0;
+      }
+    }
+
     // Default positioning for nested dropdown buttons. Overridden by subsequent styles.
     .p-navigation__item--dropdown-toggle {
       position: initial;

templates/docs/examples/patterns/navigation/_full-width-dropdown.jinja

@@ -1,18 +1,78 @@
-{% macro dropdown(id, title, is_open=False) %}
-<div class="p-navigation__dropdown is-full-width {% if not is_open %}is-collapsed{% endif %}"  data-level="1" id="{{ id }}" {% if not is_open %}aria-hidden="true"{% endif %}>
+{%- macro _build_fake_link_list(n, group_name) -%}
+{%- for i in range(n) -%}
+<li>
+  <a href="#" class="p-navigation__dropdown-item">
+    {{ group_name }} item {{ i + 1 }}
+    <br>
+    <span class="u-text--muted">Description for {{ group_name }} item {{ i + 1 }}</span>
+  </a>
+</li>
+{%- endfor -%}
+{%- endmacro -%}
+
+{%- macro _build_fake_quick_links(n, group_name) -%}
+<li class="p-navigation__dropdown-item no-hover">
+  <ul class="p-list p-navigation__secondary-links">
+    <li class="p-list__item">
+      <h2 class="p-muted-heading" tabindex="0">Quick links</h2>
+    </li>
+    {%- for i in range(1, n + 1) -%}
+    <li class="p-list__item">
+      <a class="p-navigation__secondary-link" href="#quick-link-{{ i }}" tabindex="0">{{ group_name }} quick link {{ i }}</a>
+    </li>
+    {%- endfor -%}
+  </ul>
+</li>
+{%- endmacro -%}
+
+{%- macro _build_fake_button_link(group_name) -%}
+<li class="p-navigation__dropdown-item">
+  <a href="#" class="p-link--inverted">
+    <span>{{ group_name }}</span>
+    <br>
+    <small class="u-text--muted">Description for {{ group_name }} item</small>
+  </a>
+  <br>
+  <a href="#" class="p-button--positive u-no-margin">{{ group_name }}</a>
+</li>
+{%- endmacro -%}
+
+{%- macro _build_fake_dropdown_items(group_name, links_count, has_cta_button=False, sub_links_count=15, quick_links_count=0) -%}
+{%- for i in range(1, links_count + 1) -%}
+{%- set subgroup_id = group_name ~ '-group-' ~ i -%}
+{%- set subgroup_name = group_name ~ ' ' ~ i -%}
+<li class="p-navigation__item--dropdown-toggle js-navigation-dropdown-toggle" id="{{ subgroup_id }}">
+  <button aria-controls="{{ subgroup_id }}-menu" class="p-navigation__link">
+    {{ subgroup_name }}
+  </button>
+  <ul class="p-navigation__dropdown is-collapsed js-dropdown-nav-list js-navigation-sliding-panel" id="{{ subgroup_id }}-menu" aria-hidden="true">
+    <li class="p-navigation__item--dropdown-close" id="{{ subgroup_id }}-back">
+      <button aria-controls="{{ subgroup_id }}-menu" class="p-navigation__link js-back-button">
+        Back
+      </button>
+    </li>
+    {%- if has_cta_button -%}
+      {{ _build_fake_button_link(subgroup_name) }}
+    {%- endif -%}
+    {{ _build_fake_link_list(sub_links_count, subgroup_name) }}
+    {%- if quick_links_count > 0 -%}
+      {{ _build_fake_quick_links(quick_links_count, subgroup_name) }}
+    {%- endif -%}
+  </ul>
+</li>
+{%- endfor -%}
+{%- endmacro -%}
+
+{%- macro build_fake_dropdown(id, title, is_open=False, links_count=3, has_cta_button=False, sub_links_count=16, quick_links_count=0) -%}
+<div class="p-navigation__dropdown is-full-width {% if not is_open %}is-collapsed{% endif %} js-navigation-sliding-panel"  data-level="1" id="{{ id }}" {%- if not is_open -%}aria-hidden="true"{%- endif -%}>
   <div class="p-navigation__dropdown-content--sliding">
     <ul class="p-list u-no-margin js-dropdown-nav-list">{# TODO: use p-list temporarly, we will later have more specific styling class name for it #}
       <li class="p-navigation__item--dropdown-close" id="{{ id }}-back">
         <button aria-controls="{{ id }}" class="p-navigation__link js-back-button">
           Back
         </button>
       </li>
-      <li>
-        <a href="#" class="p-navigation__dropdown-item">TODO...</a>
-      </li>
-      <li>
-        <a href="#" class="p-navigation__dropdown-item">TODO....</a>
-      </li>
+      {{ _build_fake_dropdown_items(title, links_count, has_cta_button, sub_links_count, quick_links_count) }}
     </ul>
   </div>
   <div class="p-navigation__dropdown-content--full-width">
@@ -84,4 +144,4 @@
     </div>
   </div>
 </div>
-{% endmacro %}
+{%- endmacro -%}

templates/docs/examples/patterns/navigation/_script-sliding.js

@@ -72,11 +72,20 @@ const initNavigationSliding = () => {
     });
   };
 
+  const setActiveDropdown = (dropdownToggleButton, isActive = true) => {
+    // set active state of the dropdown toggle (to slide the panel into view)
+    const dropdownToggleEl = dropdownToggleButton.closest('.js-navigation-dropdown-toggle');
+    dropdownToggleEl?.classList.toggle('is-active', isActive);
+
+    // set active state of the parent dropdown panel (to fade it out of view)
+    const parentLevelDropdown = dropdownToggleEl.closest('.js-navigation-sliding-panel');
+    parentLevelDropdown?.classList.toggle('is-active', isActive);
+  };
+
   const collapseDropdown = (dropdownToggleButton, targetDropdown, animated = false) => {
     const closeHandler = () => {
       targetDropdown.setAttribute('aria-hidden', 'true');
-      dropdownToggleButton.parentNode.classList.remove('is-active');
-      dropdownToggleButton.parentNode.parentNode.classList.remove('is-active');
+      setActiveDropdown(dropdownToggleButton, false);
     };
 
     targetDropdown.classList.add('is-collapsed');
@@ -88,8 +97,7 @@ const initNavigationSliding = () => {
   };
 
   const expandDropdown = (dropdownToggleButton, targetDropdown, animated = false) => {
-    dropdownToggleButton.parentNode.classList.add('is-active');
-    dropdownToggleButton.parentNode.parentNode.classList.add('is-active');
+    setActiveDropdown(dropdownToggleButton);
     targetDropdown.setAttribute('aria-hidden', 'false');
 
     if (animated) {
@@ -175,8 +183,7 @@ const initNavigationSliding = () => {
     e.preventDefault();
     const target = backButton.closest('.p-navigation__dropdown');
     target.setAttribute('aria-hidden', 'true');
-    backButton.closest('.is-active').classList.remove('is-active');
-    backButton.closest('.is-active').classList.remove('is-active');
+    setActiveDropdown(backButton, false);
     setFocusable(target.parentNode.parentNode);
   };
 

templates/docs/examples/patterns/navigation/dropdown-full-width.html

@@ -1,10 +1,11 @@
 {% extends "_layouts/examples.html" %}
-{% from "docs/examples/patterns/navigation/_full-width-dropdown.jinja" import dropdown %}
+{% from "docs/examples/patterns/navigation/_full-width-dropdown.jinja" import build_fake_dropdown %}
 
 {% block title %}Navigation / Full width dropdowns{% endblock %}
 
 {% block standalone_css %}patterns_navigation{% endblock %}
 
+
 {% block content %}
 <header id="navigation" class="p-navigation--sliding is-dark has-menu-open">
   <div class="p-navigation__row--25-75">
@@ -27,30 +28,30 @@
       </ul>
     </div>
     <nav class="p-navigation__nav js-show-nav" aria-label="Categories">
-      <ul class="p-navigation__items is-active js-dropdown-nav-list">
-        <li class="p-navigation__item--dropdown-toggle" role="menuitem" id="products">
+      <ul class="p-navigation__items is-active js-dropdown-nav-list js-navigation-sliding-panel">
+        <li class="p-navigation__item--dropdown-toggle js-navigation-dropdown-toggle" role="menuitem" id="products">
           <a class="p-navigation__link" href="#products" aria-controls="products-content" tabindex="0">Products</a>
-          {{ dropdown('products-content', 'Products') }}
+          {{ build_fake_dropdown('products-content', 'Products', links_count=11, sub_links_count=10, quick_links_count=5) }}
         </li>
-        <li class="p-navigation__item--dropdown-toggle is-active" role="menuitem" id="use-case">
+        <li class="p-navigation__item--dropdown-toggle is-active js-navigation-dropdown-toggle" role="menuitem" id="use-case">
           <a class="p-navigation__link" href="#use-case" aria-controls="use-case-content" tabindex="0">Use cases</a>
-          {{ dropdown('use-case-content', 'Use cases', True) }}
+          {{ build_fake_dropdown('use-case-content', 'Use cases', True) }}
         </li>
-        <li class="p-navigation__item--dropdown-toggle" role="menuitem" id="support">
+        <li class="p-navigation__item--dropdown-toggle js-navigation-dropdown-toggle" role="menuitem" id="support">
           <a class="p-navigation__link" href="#support" aria-controls="support-content" tabindex="0">Support</a>
-          {{ dropdown('support-content', 'Support') }}
+          {{ build_fake_dropdown('support-content', 'Support', links_count=2, sub_links_count=8, quick_links_count=5) }}
         </li>
-        <li class="p-navigation__item--dropdown-toggle" role="menuitem" id="community">
+        <li class="p-navigation__item--dropdown-toggle js-navigation-dropdown-toggle" role="menuitem" id="community">
           <a class="p-navigation__link" href="#community" aria-controls="community-content" tabindex="0">Community</a>
-          {{ dropdown('community-content', 'Community') }}
+          {{ build_fake_dropdown('community-content', 'Community', links_count=5, sub_links_count=7, quick_links_count=5) }}
         </li>
-        <li class="p-navigation__item--dropdown-toggle" role="menuitem" id="get-ubuntu">
+        <li class="p-navigation__item--dropdown-toggle js-navigation-dropdown-toggle" role="menuitem" id="get-ubuntu">
           <a class="p-navigation__link" href="#get-ubuntu" aria-controls="get-ubuntu-content" tabindex="0">Get Ubuntu</a>
-          {{ dropdown('get-ubuntu-content', 'Get Ubuntu') }}
+          {{ build_fake_dropdown('get-ubuntu-content', 'Get Ubuntu', links_count=6, sub_links_count=3, quick_links_count=8, has_cta_button=True ) }}
         </li>
-        <li class="p-navigation__item--dropdown-toggle is-right-shifted" role="menuitem" id="all-canonical">
+        <li class="p-navigation__item--dropdown-toggle is-right-shifted js-navigation-dropdown-toggle" role="menuitem" id="all-canonical">
           <button aria-controls="canonical-products" class="p-navigation__link" id="all-canonical-link" aria-expanded="false">All Canonical</button>
-            <ul class="p-navigation__dropdown js-dropdown-nav-list" id="canonical-products" aria-hidden="true" data-level="1">
+            <ul class="p-navigation__dropdown js-dropdown-nav-list js-navigation-sliding-panel" id="canonical-products" aria-hidden="true" data-level="1">
               <li class="p-navigation__item--dropdown-close" id="link-6-back">
                 <button aria-controls="canonical-products" class="p-navigation__link js-back-button">
                   Back