Merge pull request #1221 from mfranzke/improvement-nav-closing-nav-on-tapping-outside-on-mobile

improvement(nav): closing nav on tapping outside on mobile #1169

Author: sghoweri

packages/docs/src/js/primary-nav.js

@@ -9,75 +9,77 @@
  * 4) If the nav dropdown trigger parent does not have an active class, add it.
  */
 (function() {
-  var navDropdownListItem = document.querySelector('.js-nav-dropdown');
-  var navLink = document.querySelectorAll('.js-nav-dropdown-trigger'); /* 1 */
+	var navDropdownListItem = document.querySelector('.js-nav-dropdown');
+	var navLink = document.querySelectorAll('.js-nav-dropdown-trigger'); /* 1 */
 
-  for (i = 0; i < navLink.length; i++) {
-    /* 1 */
+	for (i = 0; i < navLink.length; i++) {
+		/* 1 */
 
-    navLink[i].addEventListener('click', function(event) {
-      /* 2 */
-      event.preventDefault();
-      var navLinkParent = this.parentNode; /* 2 */
+		navLink[i].addEventListener('click', function(event) {
+			/* 2 */
+			event.preventDefault();
+			var navLinkParent = this.parentNode; /* 2 */
 
-      if (navLinkParent.classList.contains('is-active')) {
-        /* 3 */
-        navLinkParent.classList.remove('is-active');
-        
-        this.setAttribute("aria-expanded", "false");
-      } else {
-        /* 4 */
-        navLinkParent.classList.add('is-active');
-       
-        this.setAttribute("aria-expanded", "true");
-      }
-      
-    });
-  }
+			if (navLinkParent.classList.contains('is-active')) {
+				/* 3 */
+				navLinkParent.classList.remove('is-active');
 
-  /**
-   * Expose docs dropdown if on a docs page
-   */
-  if (window.location.href.indexOf('docs') > -1) {
-    navDropdownListItem.classList.add('is-active');
-  }
+				this.setAttribute('aria-expanded', 'false');
+			} else {
+				/* 4 */
+				navLinkParent.classList.add('is-active');
 
-  var pathName = location.pathname;
+				this.setAttribute('aria-expanded', 'true');
+			}
+		});
+	}
 
-  var navLinks = document.querySelectorAll('.c-tree-nav a');
+	/**
+	 * Expose docs dropdown if on a docs page
+	 */
+	if (window.location.href.indexOf('docs') > -1) {
+		navDropdownListItem.classList.add('is-active');
+	}
 
-  for (i = 0; i < navLinks.length; i++) {
-    var subnavLink = navLinks[i].getAttribute('href');
-    if (subnavLink == pathName) {
-      navLinks[i].classList.add('is-active');
-    }
-  }
+	var pathName = location.pathname;
 
-  /**
-   * Toggles active class on the primary nav panel
-   * 1) Select all nav triggers and cycle through them
-   * 2) On click, find the nav panel within the header
-   * 3) If the navPanel already has active class, remove it on click.
-   * 4) If the navPanel does not have an active class, add it on click.
-   */
-  var navToggle = document.querySelectorAll('.js-nav-trigger'); /* 1 */
+	var navLinks = document.querySelectorAll('.c-tree-nav a');
 
-  for (i = 0; i < navToggle.length; i++) {
-    /* 1 */
+	for (i = 0; i < navLinks.length; i++) {
+		var subnavLink = navLinks[i].getAttribute('href');
+		if (subnavLink == pathName) {
+			navLinks[i].classList.add('is-active');
+		}
+	}
 
-    navToggle[i].addEventListener('click', function(event) {
-      /* 2 */
-      event.preventDefault();
-      var navToggleParent = this.parentNode; /* 2 */
-      var navPanel = navToggleParent.querySelector('.js-nav-panel'); /* 2 */
+	/**
+	 * Toggles active class on the primary nav panel
+	 * 1) Select all nav triggers and cycle through them
+	 * 2) On click, find the nav panel within the header
+	 * 3) If the navPanel already has active class, remove it on click, as well as the aria-expanded attributes value.
+	 * 4) If the navPanel does not have an active class, add it on click, as well as the aria-expanded attributes value.
+	 */
+	var navToggle = document.querySelectorAll('.js-nav-trigger'); /* 1 */
 
-      if (navPanel.classList.contains('is-active')) {
-        /* 3 */
-        navPanel.classList.remove('is-active');
-      } else {
-        /* 4 */
-        navPanel.classList.add('is-active');
-      }
-    });
-  }
+	for (i = 0; i < navToggle.length; i++) {
+		/* 1 */
+
+		navToggle[i].addEventListener('click', function(event) {
+			/* 2 */
+			event.preventDefault();
+			var navToggleElement = this;
+			var navToggleParent = navToggleElement.parentNode; /* 2 */
+			var navPanel = navToggleParent.querySelector('.js-nav-panel'); /* 2 */
+
+			if (navPanel.classList.contains('is-active')) {
+				/* 3 */
+				navPanel.classList.remove('is-active');
+				navToggleElement.setAttribute('aria-expanded', 'false');
+			} else {
+				/* 4 */
+				navPanel.classList.add('is-active');
+				navToggleElement.setAttribute('aria-expanded', 'true');
+			}
+		});
+	}
 })();

packages/docs/src/scss/components/_header.scss

@@ -47,6 +47,18 @@
 .c-header__nav-btn {
 	margin-left: auto;
 
+	// Pseudo / breakout element that enables clicking/tabbing outside of the menu to close it
+	&[aria-expanded="true"]::after {
+		position: fixed;
+		top: 0;
+		left: 0;
+
+		content: "";
+
+		width: 100vw;
+		height: 100vh;
+  }
+
 	@media all and (min-width: $bp-large) {
 		display: none;
 	}