Add functionality to account for height differences on mobile caused …

…by the url navigation (#13517)

* Add functionality to account for height differences on mobile caused by the url navigation

* Lint

* Apply review suggestions

static/js/src/navigation.js

@@ -60,10 +60,12 @@ mainList.addEventListener("click", function (e) {
     }
   } else if (
     target.classList.contains("p-navigation__dropdown-item") ||
-    (target.classList.contains("p-navigation__secondary-link") &&
-      target.tagName == "A")
+    target.classList.contains("p-navigation__secondary-link") ||
+    target.classList.contains("p-button--positive")
   ) {
-    window.location.href = target.href;
+    if (target.tagName === "A" || target.firstChild.tagName === "A") {
+      window.location.href = target.href;
+    }
   }
 });
 
@@ -148,6 +150,7 @@ function goBackOneLevel(e, backButton) {
   if (target.parentNode.getAttribute("role") == "menuitem") {
     updateNavMenu(target.parentNode, false);
   }
+  updateWindowHeight();
 }
 
 function escKeyPressHandler(e) {
@@ -219,6 +222,7 @@ function updateNavMenu(dropdown, show) {
     showDesktopDropdown(show);
   } else if (dropdownContentMobile) {
     updateMobileDropdownState(dropdown, show);
+    updateWindowHeight();
   } else {
     const observer = new MutationObserver(handleMutation);
     const observerConfig = { childList: true, subtree: true };
@@ -240,6 +244,7 @@ function updateDropdownStates(dropdown, show, delay) {
   }
   updateDesktopDropdownStates(dropdown, show, delay);
   updateMobileDropdownState(dropdown, show, isNested);
+  updateWindowHeight();
 }
 
 function updateDesktopDropdownStates(dropdown, show, delay) {
@@ -301,6 +306,27 @@ function toggleGlobalNavVisibility(dropdown, show, delay) {
   }
 }
 
+function getUrlBarHeight(element) {
+  const visibleHeight = window.innerHeight;
+  const fullHeight = document.querySelector("#control-height").clientHeight;
+  const barHeight = fullHeight - visibleHeight;
+  return barHeight;
+}
+
+// Handles mobile navigation height taking up veiwport space
+const navEle = document.querySelector(".p-navigation__nav");
+const originalMaxHeight = navEle.style.maxHeight;
+function updateWindowHeight() {
+  navEle.style.maxHeight = originalMaxHeight;
+  const isInDropdownList = mainList.classList.contains("is-active");
+  if (isInDropdownList) {
+    const newHeight = navEle.clientHeight - getUrlBarHeight() - 20 + "px";
+    navEle.style.maxHeight = newHeight;
+  } else {
+    navEle.style.maxHeight = originalMaxHeight;
+  }
+}
+
 function makeRequest(url, callback) {
   const req = new XMLHttpRequest();
   req.open("GET", url);
@@ -420,8 +446,8 @@ function keyboardNavigationHandler(e) {
 }
 
 function handleEscapeKey(e) {
-  // If '.dropdown-window__sidenav-content' exists we are in the dropdown window
-  // so we want to move up to the side-tabs
+  // If '.dropdown-window__sidenav-content' exists we are in the
+  // dropdown window so we want to move up to the side-tabs
   const targetTabId = e.target.closest(
     ".dropdown-window__sidenav-content.is-active"
   )?.id;
@@ -616,6 +642,7 @@ function closeAll() {
   closeNav();
   updateUrlHash();
   setTabIndex(mainList);
+  updateWindowHeight();
 }
 
 function openMenu(e) {

static/sass/_pattern_navigation.scss

@@ -3,6 +3,12 @@ $row-margin-small: 1rem;
 $meganav-height: 3rem;
 
 @mixin ubuntu-p-navigation {
+  #control-height {
+    height: 100vh;
+    position: absolute;
+    width: 0;
+  }
+
   #all-canonical-mobile .global-nav__header-link-anchor::after {
     @media (max-width: $breakpoint-small) {
       right: 1rem !important;

templates/templates/_navigation.html

@@ -61,6 +61,7 @@
   </div>
   {% endblock header_banner %}
   <div class="p-navigation__search-overlay"></div>
+  <div id="control-height"></div>
 </header>
 <div class="dropdown-window-overlay fade-animation"></div>
 <div class="dropdown-window slide-animation {% if breadcrumbs and breadcrumbs.children or breadcrumbs.grandchildren %}is-reduced {% elif breadcrumbs == 'tutorials' %}is-reduced{% endif %}">