nsw-design-system 3.9.0 → 3.9.2

package/dist/js/main.js

@@ -141,16 +141,15 @@
   };
 
   class Navigation {
-    constructor() {
+    constructor(element) {
+      this.nav = element;
+      this.navID = this.nav.id;
       this.openNavButton = document.querySelector('.js-open-nav');
-      this.closeNavButtons = document.querySelectorAll('.js-close-nav');
-      this.openSubNavButtons = document.querySelectorAll('.js-open-sub-nav');
-      this.closeSubNavButtons = document.querySelectorAll('.js-close-sub-nav');
-      this.mainNavElement = document.getElementById('main-nav');
-      this.isMegaMenuElement = !!document.querySelector('.js-mega-menu');
+      this.closeNavButtons = this.nav.querySelectorAll('.js-close-nav');
+      this.closeSubNavButtons = this.nav.querySelectorAll('.js-close-sub-nav');
+      this.isMegaMenuElement = this.nav.classList.contains('js-mega-menu');
+      this.mainNavIsOpen = false;
       this.transitionEvent = whichTransitionEvent();
-      this.mobileToggleMainNavEvent = e => this.mobileToggleMainNav(e);
-      this.mobileToggleSubNavEvent = () => this.closeSubNav();
       this.mobileShowMainTransitionEndEvent = e => this.mobileShowMainNav(e);
       this.mobileHideMainTransitionEndEvent = e => this.mobileHideMainNav(e);
       this.showSubNavTransitionEndEvent = e => this.showSubNav(e);
@@ -159,48 +158,52 @@
       this.desktopButtonClickEvent = e => this.buttonClickDesktop(e);
       this.desktopButtonKeydownEvent = e => this.buttonKeydownDesktop(e);
       this.checkFocusEvent = e => this.checkIfContainsFocus(e);
-      this.escapeCloseEvent = e => this.escapeClose(e);
-      this.outsideClickEvent = e => this.handleOutsideClick(e);
       this.openSubNavElements = [];
       this.breakpoint = window.matchMedia('(min-width: 62em)');
-      this.body = document.body;
     }
     init() {
-      if (this.mainNavElement) {
-        this.setUpMobileControls();
-        this.responsiveCheck(this.breakpoint);
-        this.breakpoint.addListener(e => this.responsiveCheck(e));
-        this.addOutsideClickListener();
+      this.initEvents();
+      this.responsiveCheck(this.breakpoint);
+      if (this.nav) {
+        this.breakpoint.addEventListener('change', event => this.responsiveCheck(event));
       }
     }
-    addOutsideClickListener() {
-      document.addEventListener('click', this.outsideClickEvent, false);
-    }
-    removeOutsideClickListener() {
-      document.removeEventListener('click', this.outsideClickEvent, false);
-    }
-    handleOutsideClick(event) {
-      const isOutsideNav = !this.mainNavElement.contains(event.target);
-      if (isOutsideNav) {
-        this.saveElements(event);
-        this.toggleSubNavDesktop(true);
-        event.preventDefault();
+    initEvents() {
+      if (this.isMegaMenuElement) {
+        document.addEventListener('click', this.handleOutsideClick.bind(this), false);
+        document.addEventListener('keydown', this.escapeClose.bind(this), false);
       }
+      this.openNavButton.addEventListener('click', this.mobileToggleMainNav.bind(this), false);
+      this.closeNavButtons.forEach(element => {
+        element.addEventListener('click', this.mobileToggleMainNav.bind(this), false);
+      });
+      this.closeSubNavButtons.forEach(element => {
+        element.addEventListener('click', this.closeSubNav.bind(this), false);
+      });
     }
-    responsiveCheck(e) {
+    responsiveCheck(event) {
       let megaMenuListItems = [];
-      if (e.matches) {
-        megaMenuListItems = [].slice.call(this.mainNavElement.querySelectorAll('ul > li'));
-        this.body.classList.remove('main-nav-active');
+      if (event.matches) {
+        megaMenuListItems = [].slice.call(this.nav.querySelectorAll('ul > li'));
+        document.body.classList.remove('main-nav-active');
       } else {
-        megaMenuListItems = [].slice.call(this.mainNavElement.querySelectorAll('li'));
+        megaMenuListItems = [].slice.call(this.nav.querySelectorAll('li'));
       }
       this.tearDownNavControls();
       this.setUpNavControls(megaMenuListItems);
     }
+    handleOutsideClick(event) {
+      // removes handleOutsideClick functionality from docs site
+      if (this.nav.closest('.nsw-docs')) return;
+      if (!this.mainNavIsOpen) return;
+      const isOutsideNav = !this.nav.contains(event.target);
+      if (isOutsideNav) {
+        this.toggleSubNavDesktop(true);
+      }
+    }
     tearDownNavControls() {
       if (this.isMegaMenuElement) {
-        const listItems = [].slice.call(this.mainNavElement.querySelectorAll('li'));
+        const listItems = [].slice.call(this.nav.querySelectorAll('li'));
         listItems.forEach(item => {
           const submenu = item.querySelector('[id^=sub-nav-]');
           const link = item.querySelector('a');
@@ -214,19 +217,6 @@
         });
       }
     }
-    setUpMobileControls() {
-      this.openNavButton.addEventListener('click', this.mobileToggleMainNavEvent, false);
-      this.closeNavButtons.forEach(element => {
-        element.addEventListener('click', this.mobileToggleMainNavEvent, false);
-      });
-      this.closeSubNavButtons.forEach(element => {
-        element.addEventListener('click', this.mobileToggleSubNavEvent, false);
-      });
-    }
-    mobileMainNavTrapTabs(e) {
-      const elemObj = getFocusableElementBySelector(this.mainNavElement.id, ['> div button', '> ul > li > a']);
-      trapTabKey(e, elemObj);
-    }
     setUpNavControls(listItems) {
       if (this.isMegaMenuElement) {
         listItems.forEach(item => {
@@ -238,29 +228,32 @@
             link.setAttribute('aria-controls', submenu.id);
             link.addEventListener('click', this.desktopButtonClickEvent, false);
             link.addEventListener('keydown', this.desktopButtonKeydownEvent, false);
-            document.addEventListener('keydown', this.escapeCloseEvent, false);
           }
         });
       }
     }
+    mobileMainNavTrapTabs(e) {
+      const elemObj = getFocusableElementBySelector(this.navID, ['> div button', '> ul > li > a']);
+      trapTabKey(e, elemObj);
+    }
     mobileShowMainNav(_ref) {
       let {
         propertyName
       } = _ref;
-      if (!propertyName === 'transform') return;
-      getFocusableElementBySelector(this.mainNavElement.id, ['> div button', '> ul > li > a']).all[1].focus();
-      this.mainNavElement.classList.add('active');
-      this.mainNavElement.classList.remove('activating');
-      this.mainNavElement.removeEventListener(this.transitionEvent, this.mobileShowMainTransitionEndEvent, false);
-      this.mainNavElement.addEventListener('keydown', this.mobileTrapTabKeyEvent, false);
+      if (propertyName !== 'transform') return;
+      getFocusableElementBySelector(this.navID, ['> div button', '> ul > li > a']).all[1].focus();
+      this.nav.classList.add('active');
+      this.nav.classList.remove('activating');
+      this.nav.removeEventListener(this.transitionEvent, this.mobileShowMainTransitionEndEvent, false);
+      this.nav.addEventListener('keydown', this.mobileTrapTabKeyEvent, false);
     }
     mobileHideMainNav(_ref2) {
       let {
         propertyName
       } = _ref2;
-      if (!propertyName === 'transform') return;
-      this.mainNavElement.classList.remove('active');
-      this.mainNavElement.classList.remove('closing');
+      if (propertyName !== 'transform') return;
+      this.nav.classList.remove('active');
+      this.nav.classList.remove('closing');
       while (this.openSubNavElements.length > 0) {
         const {
           submenu
@@ -270,8 +263,8 @@
         submenu.classList.remove('closing');
         this.openSubNavElements.pop();
       }
-      this.mainNavElement.removeEventListener(this.transitionEvent, this.mobileHideMainTransitionEndEvent, false);
-      this.mainNavElement.removeEventListener('keydown', this.mobileTrapTabKeyEvent, false);
+      this.nav.removeEventListener(this.transitionEvent, this.mobileHideMainTransitionEndEvent, false);
+      this.nav.removeEventListener('keydown', this.mobileTrapTabKeyEvent, false);
     }
     mobileToggleMainNav(e) {
       const {
@@ -279,29 +272,29 @@
       } = e;
       const isExpanded = currentTarget.getAttribute('aria-expanded') === 'true';
       if (isExpanded) {
-        this.body.classList.remove('main-nav-active');
+        document.body.classList.remove('main-nav-active');
         this.openNavButton.focus();
-        this.mainNavElement.classList.add('closing');
-        this.mainNavElement.addEventListener(this.transitionEvent, this.mobileHideMainTransitionEndEvent, false);
+        this.nav.classList.add('closing');
+        this.nav.addEventListener(this.transitionEvent, this.mobileHideMainTransitionEndEvent, false);
       } else {
-        this.body.classList.add('main-nav-active');
-        this.mainNavElement.classList.add('activating');
-        this.mainNavElement.addEventListener(this.transitionEvent, this.mobileShowMainTransitionEndEvent, false);
+        document.body.classList.add('main-nav-active');
+        this.nav.classList.add('activating');
+        this.nav.addEventListener(this.transitionEvent, this.mobileShowMainTransitionEndEvent, false);
       }
     }
-    buttonClickDesktop(e) {
+    buttonClickDesktop(event) {
       const isDesktop = this.breakpoint.matches;
-      if (!isDesktop || !e.target.closest('.nsw-main-nav__sub-nav')) {
-        this.saveElements(e);
+      if (!isDesktop || !event.target.closest('.nsw-main-nav__sub-nav')) {
+        this.saveElements(event);
         this.toggleSubNavDesktop();
-        e.preventDefault();
+        event.preventDefault();
       }
     }
-    buttonKeydownDesktop(e) {
-      if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
-        this.saveElements(e);
+    buttonKeydownDesktop(event) {
+      if (event.key === ' ' || event.key === 'Enter' || event.key === 'Spacebar') {
+        this.saveElements(event);
         this.toggleSubNavDesktop();
-        e.preventDefault();
+        event.preventDefault();
       }
     }
     escapeClose(e) {
@@ -335,7 +328,7 @@
       const {
         submenu
       } = this.whichSubNavLatest();
-      if (!propertyName === 'transform') return;
+      if (propertyName !== 'transform') return;
       getFocusableElementBySelector(submenu.id, ['> div button', '> .nsw-main-nav__title a', '> ul > li > a']).all[2].focus();
       submenu.removeEventListener(this.transitionEvent, this.showSubNavTransitionEndEvent, false);
     }
@@ -347,9 +340,9 @@
       if (this.breakpoint.matches) {
         link.setAttribute('aria-expanded', false);
         link.classList.remove('active');
-        this.mainNavElement.removeEventListener('focus', this.checkFocusEvent, true);
+        this.nav.removeEventListener('focus', this.checkFocusEvent, true);
         // fix: workaround for safari because it doesn't support focus event
-        this.mainNavElement.removeEventListener('click', this.checkFocusEvent, true);
+        this.nav.removeEventListener('click', this.checkFocusEvent, true);
       } else {
         link.focus();
         submenu.removeEventListener('keydown', this.mobileSubNavTrapTabKeyEvent, false);
@@ -366,9 +359,9 @@
       if (this.breakpoint.matches) {
         link.setAttribute('aria-expanded', true);
         link.classList.add('active');
-        this.mainNavElement.addEventListener('focus', this.checkFocusEvent, true);
+        this.nav.addEventListener('focus', this.checkFocusEvent, true);
         // fix: workaround for safari because it doesn't support focus event
-        this.mainNavElement.addEventListener('click', this.checkFocusEvent, true);
+        this.nav.addEventListener('click', this.checkFocusEvent, true);
       } else {
         submenu.addEventListener('keydown', this.mobileSubNavTrapTabKeyEvent, false);
         submenu.addEventListener(this.transitionEvent, this.showSubNavTransitionEndEvent, false);
@@ -383,8 +376,10 @@
       } = this.whichSubNavLatest();
       const isExpanded = link.getAttribute('aria-expanded') === 'true';
       if (isExpanded) {
+        this.mainNavIsOpen = false;
         this.closeSubNav();
       } else {
+        this.mainNavIsOpen = true;
         this.openSubNav();
       }
     }
@@ -592,7 +587,7 @@
       this.filtersItems = element.querySelectorAll('.nsw-filters__item');
       /* eslint-disable max-len */
       this.focusableEls = this.filtersWrapper.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
-      this.checkIcon = '<span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">check_circle</span>';
+      this.checkIcon = '<span class="material-icons nsw-material-icons nsw-material-icons--valid" focusable="false" aria-hidden="true">check_circle</span>';
       this.arrowIcon = '<span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">keyboard_arrow_right</span>';
       /* eslint-ensable max-len */
       this.showEvent = e => this.showFilters(e);
@@ -3188,6 +3183,7 @@
     // Header Search
     const openSearchButton = document.querySelectorAll('.js-open-search');
     const closeSearchButton = document.querySelectorAll('.js-close-search');
+    const navigation = document.getElementById('main-nav');
     const accordions = document.querySelectorAll('.js-accordion');
     const dialogs = document.querySelectorAll('.js-dialog');
     const fileUpload = document.querySelectorAll('.js-file-upload');
@@ -3204,9 +3200,9 @@
     closeSearchButton.forEach(element => {
       new SiteSearch(element).init();
     });
-
-    // Navigation
-    new Navigation().init();
+    if (navigation) {
+      new Navigation(navigation).init();
+    }
     accordions.forEach(element => {
       new Accordion(element).init();
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsw-design-system",
-  "version": "3.9.0",
+  "version": "3.9.2",
   "description": "Design system for Digital NSW",
   "main": "dist/main.js",
   "style": "dist/main.css",

package/src/components/filters/_filters.scss

@@ -368,19 +368,26 @@
     span:not(.nsw-material-icons) {
       display: flex;
       align-items: center;
-      padding: 0;
+    }
 
-      .nsw-material-icons:last-child {
-        font-size: rem(map-get($nsw-icon-sizes, 20));
-        background-color: var(--nsw-white);
+    .nsw-material-icons {
+      font-size: rem(map-get($nsw-icon-sizes, 20));
+      margin-left: rem(8px);
+      border-radius: 50%;
+      width: rem(16px);
+      height: rem(16px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &--error {
+        background-color: var(--nsw-status-error-bg);
+        color: var(--nsw-status-error);
+      }
+  
+      &--valid {
+        background-color: var(--nsw-status-success-bg);
         color: var(--nsw-status-success);
-        margin-left: rem(8px);
-        border-radius: 50%;
-        width: rem(16px);
-        height: rem(16px);
-        display: flex;
-        justify-content: center;
-        align-items: center;
       }
     }
 

package/src/components/filters/filters.js

@@ -19,7 +19,7 @@ class Filters {
     this.filtersItems = element.querySelectorAll('.nsw-filters__item')
     /* eslint-disable max-len */
     this.focusableEls = this.filtersWrapper.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])')
-    this.checkIcon = '<span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">check_circle</span>'
+    this.checkIcon = '<span class="material-icons nsw-material-icons nsw-material-icons--valid" focusable="false" aria-hidden="true">check_circle</span>'
     this.arrowIcon = '<span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">keyboard_arrow_right</span>'
     /* eslint-ensable max-len */
     this.showEvent = (e) => this.showFilters(e)

package/src/components/main-nav/_main-nav.scss

@@ -81,6 +81,14 @@
       position: relative;
     }
 
+    > li {      
+      @include breakpoint($nsw-desktop-breakpoint) {
+        &.active {
+          box-shadow: inset 0 -4px 0 var(--nsw-brand-dark);
+        }
+      }
+    }
+
     > li > a {      
       @include breakpoint($nsw-desktop-breakpoint) {
         .nsw-material-icons {
@@ -90,6 +98,7 @@
 
         &.active {
           background-color: var(--nsw-white);
+          box-shadow: inset 0 -4px 0 var(--nsw-brand-dark);
         }
 
         &.active .nsw-material-icons {
@@ -261,7 +270,7 @@
         }
 
         &:nth-last-child(-n+3) {
-          border-bottom: solid 1px var(--nsw-grey-04);
+          box-shadow: inset 0 -1px 0 var(--nsw-grey-04);
         }
 
         a {

package/src/components/main-nav/main-nav.js

@@ -3,16 +3,15 @@ import {
 } from '../../global/scripts/helpers/utilities'
 
 class Navigation {
-  constructor() {
+  constructor(element) {
+    this.nav = element
+    this.navID = this.nav.id
     this.openNavButton = document.querySelector('.js-open-nav')
-    this.closeNavButtons = document.querySelectorAll('.js-close-nav')
-    this.openSubNavButtons = document.querySelectorAll('.js-open-sub-nav')
-    this.closeSubNavButtons = document.querySelectorAll('.js-close-sub-nav')
-    this.mainNavElement = document.getElementById('main-nav')
-    this.isMegaMenuElement = !!document.querySelector('.js-mega-menu')
+    this.closeNavButtons = this.nav.querySelectorAll('.js-close-nav')
+    this.closeSubNavButtons = this.nav.querySelectorAll('.js-close-sub-nav')
+    this.isMegaMenuElement = this.nav.classList.contains('js-mega-menu')
+    this.mainNavIsOpen = false
     this.transitionEvent = whichTransitionEvent()
-    this.mobileToggleMainNavEvent = (e) => this.mobileToggleMainNav(e)
-    this.mobileToggleSubNavEvent = () => this.closeSubNav()
     this.mobileShowMainTransitionEndEvent = (e) => this.mobileShowMainNav(e)
     this.mobileHideMainTransitionEndEvent = (e) => this.mobileHideMainNav(e)
     this.showSubNavTransitionEndEvent = (e) => this.showSubNav(e)
@@ -21,55 +20,64 @@ class Navigation {
     this.desktopButtonClickEvent = (e) => this.buttonClickDesktop(e)
     this.desktopButtonKeydownEvent = (e) => this.buttonKeydownDesktop(e)
     this.checkFocusEvent = (e) => this.checkIfContainsFocus(e)
-    this.escapeCloseEvent = (e) => this.escapeClose(e)
-    this.outsideClickEvent = (e) => this.handleOutsideClick(e)
     this.openSubNavElements = []
     this.breakpoint = window.matchMedia('(min-width: 62em)')
-    this.body = document.body
   }
 
   init() {
-    if (this.mainNavElement) {
-      this.setUpMobileControls()
-      this.responsiveCheck(this.breakpoint)
-      this.breakpoint.addListener((e) => this.responsiveCheck(e))
-      this.addOutsideClickListener()
+    this.initEvents()
+    this.responsiveCheck(this.breakpoint)
+
+    if (this.nav) {
+      this.breakpoint.addEventListener('change', (event) => this.responsiveCheck(event))
     }
   }
 
-  addOutsideClickListener() {
-    document.addEventListener('click', this.outsideClickEvent, false)
-  }
+  initEvents() {
+    if (this.isMegaMenuElement) {
+      document.addEventListener('click', this.handleOutsideClick.bind(this), false)
+      document.addEventListener('keydown', this.escapeClose.bind(this), false)
+    }
 
-  removeOutsideClickListener() {
-    document.removeEventListener('click', this.outsideClickEvent, false)
-  }
+    this.openNavButton.addEventListener('click', this.mobileToggleMainNav.bind(this), false)
 
-  handleOutsideClick(event) {
-    const isOutsideNav = !this.mainNavElement.contains(event.target)
+    this.closeNavButtons.forEach((element) => {
+      element.addEventListener('click', this.mobileToggleMainNav.bind(this), false)
+    })
 
-    if (isOutsideNav) {
-      this.saveElements(event)
-      this.toggleSubNavDesktop(true)
-      event.preventDefault()
-    }
+    this.closeSubNavButtons.forEach((element) => {
+      element.addEventListener('click', this.closeSubNav.bind(this), false)
+    })
   }
 
-  responsiveCheck(e) {
+  responsiveCheck(event) {
     let megaMenuListItems = []
-    if (e.matches) {
-      megaMenuListItems = [].slice.call(this.mainNavElement.querySelectorAll('ul > li'))
-      this.body.classList.remove('main-nav-active')
+    if (event.matches) {
+      megaMenuListItems = [].slice.call(this.nav.querySelectorAll('ul > li'))
+      document.body.classList.remove('main-nav-active')
     } else {
-      megaMenuListItems = [].slice.call(this.mainNavElement.querySelectorAll('li'))
+      megaMenuListItems = [].slice.call(this.nav.querySelectorAll('li'))
     }
     this.tearDownNavControls()
     this.setUpNavControls(megaMenuListItems)
   }
 
+  handleOutsideClick(event) {
+    // removes handleOutsideClick functionality from docs site
+    if (this.nav.closest('.nsw-docs')) return
+
+    if (!this.mainNavIsOpen) return
+
+    const isOutsideNav = !this.nav.contains(event.target)
+
+    if (isOutsideNav) {
+      this.toggleSubNavDesktop(true)
+    }
+  }
+
   tearDownNavControls() {
     if (this.isMegaMenuElement) {
-      const listItems = [].slice.call(this.mainNavElement.querySelectorAll('li'))
+      const listItems = [].slice.call(this.nav.querySelectorAll('li'))
       listItems.forEach((item) => {
         const submenu = item.querySelector('[id^=sub-nav-]')
         const link = item.querySelector('a')
@@ -84,23 +92,6 @@ class Navigation {
     }
   }
 
-  setUpMobileControls() {
-    this.openNavButton.addEventListener('click', this.mobileToggleMainNavEvent, false)
-
-    this.closeNavButtons.forEach((element) => {
-      element.addEventListener('click', this.mobileToggleMainNavEvent, false)
-    })
-
-    this.closeSubNavButtons.forEach((element) => {
-      element.addEventListener('click', this.mobileToggleSubNavEvent, false)
-    })
-  }
-
-  mobileMainNavTrapTabs(e) {
-    const elemObj = getFocusableElementBySelector(this.mainNavElement.id, ['> div button', '> ul > li > a'])
-    trapTabKey(e, elemObj)
-  }
-
   setUpNavControls(listItems) {
     if (this.isMegaMenuElement) {
       listItems.forEach((item) => {
@@ -112,26 +103,31 @@ class Navigation {
           link.setAttribute('aria-controls', submenu.id)
           link.addEventListener('click', this.desktopButtonClickEvent, false)
           link.addEventListener('keydown', this.desktopButtonKeydownEvent, false)
-          document.addEventListener('keydown', this.escapeCloseEvent, false)
         }
       })
     }
   }
 
+  mobileMainNavTrapTabs(e) {
+    const elemObj = getFocusableElementBySelector(this.navID, ['> div button', '> ul > li > a'])
+    trapTabKey(e, elemObj)
+  }
+
   mobileShowMainNav({ propertyName }) {
-    if (!propertyName === 'transform') return
-    getFocusableElementBySelector(this.mainNavElement.id, ['> div button', '> ul > li > a']).all[1].focus()
-    this.mainNavElement.classList.add('active')
-    this.mainNavElement.classList.remove('activating')
-    this.mainNavElement.removeEventListener(this.transitionEvent, this.mobileShowMainTransitionEndEvent, false)
-    this.mainNavElement.addEventListener('keydown', this.mobileTrapTabKeyEvent, false)
+    if (propertyName !== 'transform') return
+    getFocusableElementBySelector(this.navID, ['> div button', '> ul > li > a']).all[1].focus()
+    this.nav.classList.add('active')
+    this.nav.classList.remove('activating')
+    this.nav.removeEventListener(this.transitionEvent, this.mobileShowMainTransitionEndEvent, false)
+    this.nav.addEventListener('keydown', this.mobileTrapTabKeyEvent, false)
   }
 
   mobileHideMainNav({ propertyName }) {
-    if (!propertyName === 'transform') return
+    if (propertyName !== 'transform') return
+
+    this.nav.classList.remove('active')
+    this.nav.classList.remove('closing')
 
-    this.mainNavElement.classList.remove('active')
-    this.mainNavElement.classList.remove('closing')
     while (this.openSubNavElements.length > 0) {
       const { submenu } = this.whichSubNavLatest()
       submenu.removeEventListener('keydown', this.mobileSubNavTrapTabKeyEvent, false)
@@ -139,39 +135,40 @@ class Navigation {
       submenu.classList.remove('closing')
       this.openSubNavElements.pop()
     }
-    this.mainNavElement.removeEventListener(this.transitionEvent, this.mobileHideMainTransitionEndEvent, false)
-    this.mainNavElement.removeEventListener('keydown', this.mobileTrapTabKeyEvent, false)
+
+    this.nav.removeEventListener(this.transitionEvent, this.mobileHideMainTransitionEndEvent, false)
+    this.nav.removeEventListener('keydown', this.mobileTrapTabKeyEvent, false)
   }
 
   mobileToggleMainNav(e) {
     const { currentTarget } = e
     const isExpanded = currentTarget.getAttribute('aria-expanded') === 'true'
     if (isExpanded) {
-      this.body.classList.remove('main-nav-active')
+      document.body.classList.remove('main-nav-active')
       this.openNavButton.focus()
-      this.mainNavElement.classList.add('closing')
-      this.mainNavElement.addEventListener(this.transitionEvent, this.mobileHideMainTransitionEndEvent, false)
+      this.nav.classList.add('closing')
+      this.nav.addEventListener(this.transitionEvent, this.mobileHideMainTransitionEndEvent, false)
     } else {
-      this.body.classList.add('main-nav-active')
-      this.mainNavElement.classList.add('activating')
-      this.mainNavElement.addEventListener(this.transitionEvent, this.mobileShowMainTransitionEndEvent, false)
+      document.body.classList.add('main-nav-active')
+      this.nav.classList.add('activating')
+      this.nav.addEventListener(this.transitionEvent, this.mobileShowMainTransitionEndEvent, false)
     }
   }
 
-  buttonClickDesktop(e) {
+  buttonClickDesktop(event) {
     const isDesktop = this.breakpoint.matches
-    if (!isDesktop || !e.target.closest('.nsw-main-nav__sub-nav')) {
-      this.saveElements(e)
+    if (!isDesktop || !event.target.closest('.nsw-main-nav__sub-nav')) {
+      this.saveElements(event)
       this.toggleSubNavDesktop()
-      e.preventDefault()
+      event.preventDefault()
     }
   }
 
-  buttonKeydownDesktop(e) {
-    if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
-      this.saveElements(e)
+  buttonKeydownDesktop(event) {
+    if (event.key === ' ' || event.key === 'Enter' || event.key === 'Spacebar') {
+      this.saveElements(event)
       this.toggleSubNavDesktop()
-      e.preventDefault()
+      event.preventDefault()
     }
   }
 
@@ -200,7 +197,7 @@ class Navigation {
 
   showSubNav({ propertyName }) {
     const { submenu } = this.whichSubNavLatest()
-    if (!propertyName === 'transform') return
+    if (propertyName !== 'transform') return
     getFocusableElementBySelector(submenu.id, ['> div button', '> .nsw-main-nav__title a', '> ul > li > a']).all[2].focus()
     submenu.removeEventListener(this.transitionEvent, this.showSubNavTransitionEndEvent, false)
   }
@@ -210,9 +207,9 @@ class Navigation {
     if (this.breakpoint.matches) {
       link.setAttribute('aria-expanded', false)
       link.classList.remove('active')
-      this.mainNavElement.removeEventListener('focus', this.checkFocusEvent, true)
+      this.nav.removeEventListener('focus', this.checkFocusEvent, true)
       // fix: workaround for safari because it doesn't support focus event
-      this.mainNavElement.removeEventListener('click', this.checkFocusEvent, true)
+      this.nav.removeEventListener('click', this.checkFocusEvent, true)
     } else {
       link.focus()
       submenu.removeEventListener('keydown', this.mobileSubNavTrapTabKeyEvent, false)
@@ -227,9 +224,9 @@ class Navigation {
     if (this.breakpoint.matches) {
       link.setAttribute('aria-expanded', true)
       link.classList.add('active')
-      this.mainNavElement.addEventListener('focus', this.checkFocusEvent, true)
+      this.nav.addEventListener('focus', this.checkFocusEvent, true)
       // fix: workaround for safari because it doesn't support focus event
-      this.mainNavElement.addEventListener('click', this.checkFocusEvent, true)
+      this.nav.addEventListener('click', this.checkFocusEvent, true)
     } else {
       submenu.addEventListener('keydown', this.mobileSubNavTrapTabKeyEvent, false)
       submenu.addEventListener(this.transitionEvent, this.showSubNavTransitionEndEvent, false)
@@ -243,8 +240,10 @@ class Navigation {
     const { link } = this.whichSubNavLatest()
     const isExpanded = link.getAttribute('aria-expanded') === 'true'
     if (isExpanded) {
+      this.mainNavIsOpen = false
       this.closeSubNav()
     } else {
+      this.mainNavIsOpen = true
       this.openSubNav()
     }
   }