@cagovweb/state-template 1.1.0-beta.1 → 1.1.0-beta.2

package/dist/js/cagov.core.js

@@ -8,18 +8,20 @@
 //@ts-check
 
 /* sticky header / hiding official header on scroll */
-(() => {
+window.addEventListener("load", () => {
   const doc = document.documentElement;
 
   let prevScroll = window.scrollY || doc.scrollTop;
   let curScroll;
   let direction = 0;
   let prevDirection = 0;
+
   const headerAlert = document.querySelector("header .alert");
   const header = document.querySelector(".utility-header");
   const mainheader = document.querySelector("header");
+  if (!header || !mainheader) return;
 
-  const checkScroll = () => {
+  window.addEventListener("scroll", () => {
     /*
      ** Find the direction of scroll
      ** 0 - initial, 1 - up, 2 - down
@@ -38,7 +40,7 @@
       // Toggle Header
       if (direction === 2 && curScroll > 40) {
         const hiddenheight =
-          header.clientHeight + (headerAlert ? headerAlert.clientHeight : 0);
+          header.clientHeight + (headerAlert?.clientHeight || 0);
 
         mainheader.style.top = `-${hiddenheight}px`;
         prevDirection = direction;
@@ -52,10 +54,8 @@
     }
 
     prevScroll = curScroll;
-  };
-
-  window.addEventListener("scroll", checkScroll);
-})();
+  });
+});
 
 // retain scroll position
 
@@ -139,12 +139,17 @@ class CaGovAccordion extends HTMLElement {
     };
   }
 }
-window.customElements.define("cagov-accordion", CaGovAccordion);
+window.addEventListener("load", () => {
+  window.customElements.define("cagov-accordion", CaGovAccordion);
+});
 
 //document.querySelector('head').appendChild(style);
 
 //@ts-check
-((w, doc) => {
+window.addEventListener("load", () => {
+  const w = window;
+  const doc = document;
+
   /**
    * Local object for method references
    * and define script meta-data
@@ -431,7 +436,7 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
         !doc.getElementById(thisAccordion).hasAttribute("data-multi")
       ) {
         // swap expanded when there is a single constant panel
-        for (let trigger of triggers) {
+        for (const trigger of triggers)
           if (thisTrigger !== trigger) {
             isCurrent(trigger, false);
             const getID = trigger.getAttribute("aria-controls");
@@ -439,7 +444,6 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
             ariaExpanded(trigger, false);
             ariaHidden(doc.getElementById(getID), true);
           }
-        }
       }
     }
   };
@@ -544,7 +548,7 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
 
   // go go JavaScript
   ARIAaccordion.init();
-})(window, document);
+});
 
 //@ts-check
 
@@ -640,10 +644,8 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
    * @return {String} the value of attribute data-hashtooltip-id
    */
   const searchParentHashId = (el, hashId) => {
-    let found = false;
-
     let parentElement = el;
-    while (parentElement && !found) {
+    while (parentElement) {
       if (parentElement.hasAttribute(hashId)) {
         return parentElement.getAttribute(hashId);
       } else {
@@ -659,10 +661,8 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
    * @param {String} hashId
    */
   const searchParent = (el, parentClass, hashId) => {
-    let found = false;
-
     let parentElement = el;
-    while (parentElement && !found) {
+    while (parentElement) {
       if (
         parentElement.classList.contains(parentClass) &&
         parentElement.getAttribute(DATA_HASH_ID) === hashId
@@ -803,6 +803,8 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
 
           const indexHeaderLisible = index_header + 1;
           const accordionPanel = header_node.nextElementSibling;
+          if (!accordionPanel) return;
+
           const accordionHeaderText = header_node.innerHTML;
           const accordionButton = document.createElement("BUTTON");
           const accordionOpenedAttribute = header_node.hasAttribute(
@@ -1020,20 +1022,7 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
     return plugin;
   };
 
-  // @ts-ignore
-  window.van11yAccessibleAccordionAria = main();
-
-  const onLoad = function onLoad() {
-    // @ts-ignore
-    const expand_default = window.van11yAccessibleAccordionAria();
-    expand_default.attach();
-
-    document.removeEventListener("DOMContentLoaded", onLoad);
-  };
-
-  document.addEventListener("DOMContentLoaded", onLoad);
-
-  function NavReset() {
+  const NavReset = () => {
     //RESET
     document
       .querySelectorAll(".first-level-btn")
@@ -1059,18 +1048,14 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
       const nav = document.querySelector("#navigation");
       nav.removeAttribute("aria-hidden");
     }
-  }
-
-  const isDocumentReady = (
-    /** @type {{ (): void; (this: Document, ev: Event): any; }} */ callbackFunction
-  ) => {
-    if (document.readyState != "loading") callbackFunction();
-    else document.addEventListener("DOMContentLoaded", callbackFunction);
   };
 
   // Remove href if <a> has a link
-  isDocumentReady(() => {
+  window.addEventListener("load", () => {
+    main()().attach(); //This is way more abstract than it needs to be
+
     const navigationJS = document.querySelector(".main-navigation");
+    if (!navigationJS) return;
 
     const subnavbtnJS = document.querySelectorAll(
       ".main-navigation .nav-item a.has-sub-btn"
@@ -1083,9 +1068,9 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
       item.replaceWith(newDiv);
     });
 
-    const singleLevel = navigationJS?.classList.contains("singleLevel");
+    const singleLevel = navigationJS.classList.contains("singleLevel");
     const setActiveLinkByFolder =
-      navigationJS?.classList.contains("auto-highlight");
+      navigationJS.classList.contains("auto-highlight");
 
     const navItemsJS = document.querySelectorAll(".main-navigation .nav-item");
 
@@ -1094,15 +1079,21 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
     ).filter(x => x.querySelector(".sub-nav"));
 
     navItemsJS.forEach(navItem => {
+      /** @type {HTMLElement | null} */
       const link = navItem.querySelector(".first-level-btn, .first-level-link");
+      if (link) {
+        if (setActiveLinkByFolder && link.getAttribute("href")) {
+          const arrNavLink = link.getAttribute("href")?.split("/");
+          const arrCurrentURL = location.href.split("/");
 
-      if (setActiveLinkByFolder && link.getAttribute("href")) {
-        const arrNavLink = link.getAttribute("href").split("/");
-        const arrCurrentURL = location.href.split("/");
-
-        if (arrNavLink.length > 4 && arrCurrentURL[3] === arrNavLink[3]) {
-          // folder of current URL matches this nav link
-          navItem.classList.add("active");
+          if (
+            arrNavLink &&
+            arrNavLink.length > 4 &&
+            arrCurrentURL[3] === arrNavLink[3]
+          ) {
+            // folder of current URL matches this nav link
+            navItem.classList.add("active");
+          }
         }
       }
     });
@@ -1125,7 +1116,7 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
       const itemCount = el.querySelectorAll(".second-level-nav > li").length;
       if (itemCount <= 2) {
         const subnav = el.querySelector(".sub-nav");
-        subnav.classList.add("with-few-items");
+        if (subnav) subnav.classList.add("with-few-items");
       }
     });
 
@@ -1147,18 +1138,22 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
         el.appendChild(carrot);
       });
     }
+
+    addActive();
   });
 
-  // Do Navigation Reset function on window resize uless it's mobile device.
+  // Do Navigation Reset function on window resize.
   window.addEventListener("resize", () => {
     document
       .querySelector(".toggle-menu")
-      .setAttribute("aria-expanded", "false");
+      ?.setAttribute("aria-expanded", "false");
 
     //Collapse the nav when narrow
-    const nav = document.querySelector("#navigation");
-    nav.classList.remove("show");
-    nav.setAttribute("aria-hidden", "true");
+    //const nav = document.querySelector("#navigation");
+    //if (nav) {
+    //nav.classList.remove("show"); //This was causing the desktop menu to stay hidden when resizing from mobile.
+    //nav.setAttribute("aria-hidden", "true");
+    //}
 
     NavReset();
   });
@@ -1186,15 +1181,77 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
       }
     }
   };
-  addActive();
 })();
 
 //@ts-check
 /* -----------------------------------------
    SEARCH - /source/js/cagov/search.js
 ----------------------------------------- */
-(() => {
-  /** @type {HTMLInputElement} */
+
+window.addEventListener("load", () => {
+  const setSearchContainerAriaHidden = () => {
+    if (searchContainer) {
+      if (featuredsearch) {
+        searchContainer.removeAttribute("aria-hidden");
+
+        document.querySelector("[name='q']")?.removeAttribute("tabindex");
+        document
+          .querySelector(".gsc-search-button")
+          ?.removeAttribute("tabindex");
+      } else {
+        searchContainer.setAttribute("aria-hidden", "true");
+      }
+    }
+  };
+
+  const mobileControlVisible = () => {
+    const mobileElement = document.querySelector(
+      ".global-header .mobile-controls"
+    );
+
+    if (mobileElement) {
+      return getComputedStyle(mobileElement)["display"] !== "none";
+    } else {
+      return false; // or whatever is supposed to be returned when there is no header
+    }
+  };
+
+  const removeSearchResults = () => {
+    document.body.classList.remove("active-search");
+    if (searchText) searchText.value = "";
+    if (searchContainer) {
+      searchContainer.classList.remove("active");
+      searchContainer.setAttribute("aria-hidden", "true");
+    }
+
+    const resultsContainer = document.querySelector(
+      ".search-results-container"
+    );
+    if (resultsContainer) {
+      resultsContainer.classList.remove("visible");
+    }
+
+    document
+      .querySelectorAll(".ask-group")
+      .forEach(a => a.classList.remove("fade-out"));
+
+    if (!featuredsearch) {
+      // added aria expaned attr for accessibility
+      const firstLevelBtn = document.querySelector("button.first-level-link");
+      if (firstLevelBtn) firstLevelBtn.setAttribute("aria-expanded", "false");
+      setSearchAttr();
+    }
+    // fire a scroll event to help update headers if need be
+    window.dispatchEvent(new CustomEvent("scroll"));
+
+    //        document.dispatchEvent('cagov.searchresults.hide'); // ???
+
+    if (mobileControlVisible()) {
+      setSearchContainerAriaHidden();
+    }
+  };
+
+  /** @type {HTMLInputElement | null} */
   const searchText = document.querySelector(".search-textfield"); // search textfield, unique
   const searchInput = document.querySelector(
     "#head-search #Search .search-textfield"
@@ -1214,7 +1271,7 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
 
   const searchlabel = document.querySelector("#SearchInput"); // label for textfield
 
-  /** @type {HTMLElement} */
+  /** @type {HTMLElement | null} */
   const searchbox = document.querySelector(
     ".search-container:not(.featured-search)"
   ); // only on subpages, unique, same as #head-search
@@ -1224,7 +1281,7 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
     document.querySelector(".global-header")
   )?.offsetHeight; // header height
 
-  /** @type {HTMLElement} */
+  /** @type {HTMLElement | null} */
   const utility = document.querySelector(".utility-header"); // utility header, unique
   const utilityHeight = utility?.offsetHeight || 0;
   // utility header height
@@ -1248,195 +1305,161 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
     ? 82
     : 0;
 
-  const body = document.querySelector("body");
+  if (searchText && searchContainer) {
+    // Unfreeze search width when blured.
+    const unfreezeSearchWidth = () => {
+      searchContainer.classList.remove("focus");
+      document.querySelector(".search-container")?.classList.add("focus"); // search-container is unique
+    };
+    searchText.addEventListener("blur", unfreezeSearchWidth, false);
+    searchText.addEventListener("focus", unfreezeSearchWidth, false);
+    const chgHandler = function () {
+      if (this.value) {
+        document.body.classList.add("active-search");
+      }
+    };
+    searchText.addEventListener("change", chgHandler, false);
+    searchText.addEventListener("keyup", chgHandler, false);
+    searchText.addEventListener("paste", chgHandler, false);
+  }
 
-  window.addEventListener("load", () => {
-    if (searchText) {
-      // Unfreeze search width when blured.
-      const unfreezeSearchWidth = () => {
-        searchContainer.classList.remove("focus");
-        document.querySelector(".search-container").classList.add("focus"); // search-container is unique
-      };
-      searchText.addEventListener("blur", unfreezeSearchWidth, false);
-      searchText.addEventListener("focus", unfreezeSearchWidth, false);
-      const chgHandler = function () {
-        if (this.value) {
-          body.classList.add("active-search");
-        }
-      };
-      searchText.addEventListener("change", chgHandler, false);
-      searchText.addEventListener("keyup", chgHandler, false);
-      searchText.addEventListener("paste", chgHandler, false);
-    }
+  if (!featuredsearch) {
+    // added aria expaned attr for accessibility
+    const firstLevelBtn = document.querySelector("button.first-level-link");
+    if (firstLevelBtn) firstLevelBtn.setAttribute("aria-expanded", "false");
+  }
 
-    if (!featuredsearch) {
-      // added aria expaned attr for accessibility
-      const firstLevelBtn = document.querySelector("button.first-level-link");
-      if (firstLevelBtn) firstLevelBtn.setAttribute("aria-expanded", "false");
+  //  search box top position
+  // TODO: Really close to searchTop() except for top size
+  if (!mobileControlVisible()) {
+    // calulation search box top position
+    const searchtop =
+      headerHeight - utilityHeight - alertbannerHeight - navigationHeight;
+    if (!mobileControlVisible() && searchbox) {
+      searchbox.style.top = `${Math.max(searchtop, 82)}px`;
     }
+  }
 
-    //  search box top position
-    // TODO: Really close to searchTop() except for top size
-    if (!mobileView_for_search()) {
-      // calulation search box top position
-      const searchtop =
-        headerHeight - utilityHeight - alertbannerHeight - navigationHeight;
-      if (!mobileView_for_search() && searchbox) {
-        searchbox.style.top = `${Math.max(searchtop, 82)}px`;
-      }
-    }
+  // have the close button remove search results and the applied classes
+  //resultsContainer.find('.close').on('click', removeSearchResults);
+  const resContainClose = document.querySelector(
+    ".search-results-container .close"
+  );
+  if (resContainClose)
+    resContainClose.addEventListener("click", removeSearchResults, false);
 
-    // have the close button remove search results and the applied classes
-    //resultsContainer.find('.close').on('click', removeSearchResults);
-    const resContainClose = document.querySelector(
-      ".search-results-container .close"
-    );
-    if (resContainClose)
-      resContainClose.addEventListener("click", removeSearchResults, false);
-
-    //searchContainer.find('.close').on('click', removeSearchResults);
-    const hsClose = document.querySelector("#head-search .close");
-    if (hsClose) hsClose.addEventListener("click", removeSearchResults, false);
-
-    // Our special nav icon which we need to hook into for starting the search
-    // $('#nav-item-search')
-
-    // so instead we are binding to what I'm assuming will always be the search
-    const searchButton = document.querySelector("#nav-item-search");
-    if (searchButton) {
-      searchButton.addEventListener(
-        "click",
-        function (e) {
-          e.preventDefault();
-          searchText.focus();
+  //searchContainer.find('.close').on('click', removeSearchResults);
+  const hsClose = document.querySelector("#head-search .close");
+  if (hsClose) hsClose.addEventListener("click", removeSearchResults, false);
 
-          if (
-            !featuredsearch &&
-            document.querySelector(".search-container:not(.featured-search)")
-          ) {
-            document
-              .querySelector(".search-container:not(.featured-search)")
-              .classList.toggle("active");
-          }
+  // Our special nav icon which we need to hook into for starting the search
+  // $('#nav-item-search')
 
-          // hide Search form if it's not active
-          if (searchactive) {
-            // added aria expanded attr for accessibility
-            this.querySelector("button").setAttribute("aria-expanded", "true");
-            removeSearchAttr();
-          } else {
-            // added aria expaned attr for accessibility
-            this.querySelector("button").setAttribute("aria-expanded", "false");
-            setSearchAttr();
-          }
+  // so instead we are binding to what I'm assuming will always be the search
+  const searchButton = document.querySelector("#nav-item-search");
+  if (searchButton && searchText) {
+    searchButton.addEventListener(
+      "click",
+      function (e) {
+        e.preventDefault();
+        searchText.focus();
+        //".search-container:not(.featured-search)"
+        if (!featuredsearch && searchbox) {
+          searchbox.classList.toggle("active");
+        }
+
+        // hide Search form if it's not active
+        if (searchactive) {
+          // added aria expanded attr for accessibility
+          this.querySelector("button").setAttribute("aria-expanded", "true");
+          removeSearchAttr();
+        } else {
+          // added aria expaned attr for accessibility
+          this.querySelector("button").setAttribute("aria-expanded", "false");
+          setSearchAttr();
+        }
 
-          if (featuredsearch) removeSearchAttr();
+        if (featuredsearch) removeSearchAttr();
 
-          // let the user know the input box is where they should search
+        // let the user know the input box is where they should search
+        if (searchContainer) {
           searchContainer.classList.add("play-animation");
           searchContainer.addEventListener("animationend", () => {
             this.classList.remove("play-animation");
           });
-        },
-        false
-      );
-    }
-
-    // Close search when close icon is clicked
-    if (searchReset) searchReset.addEventListener("click", removeSearchResults);
-
-    function removeSearchResults() {
-      body.classList.remove("active-search");
-      searchText.value = "";
-      searchContainer.classList.remove("active");
-      searchContainer.setAttribute("aria-hidden", "true");
-
-      const resultsContainer = document.querySelector(
-        ".search-results-container"
-      );
-      if (resultsContainer) {
-        resultsContainer.classList.remove("visible");
-      }
-
-      document
-        .querySelectorAll(".ask-group")
-        .forEach(a => a.classList.remove("fade-out"));
-
-      if (!featuredsearch) {
-        // added aria expaned attr for accessibility
-        document
-          .querySelector("button.first-level-link")
-          .setAttribute("aria-expanded", "false");
-        setSearchAttr();
-      }
-      // fire a scroll event to help update headers if need be
-      window.dispatchEvent(new CustomEvent("scroll"));
+        }
+      },
+      false
+    );
+  }
 
-      //        document.dispatchEvent('cagov.searchresults.hide'); // ???
+  // Close search when close icon is clicked
+  if (searchReset) searchReset.addEventListener("click", removeSearchResults);
 
-      if (mobileView_for_search()) {
-        ariaHidden();
-      }
+  const removeSearchAttr = () => {
+    if (searchInput) {
+      searchInput.removeAttribute("tabindex");
+      searchInput.removeAttribute("aria-hidden");
+    }
+    if (searchSubmit) {
+      searchSubmit.removeAttribute("tabindex");
+      searchSubmit.removeAttribute("aria-hidden");
     }
+    if (searchReset) {
+      searchReset.removeAttribute("tabindex");
+      searchReset.removeAttribute("aria-hidden");
+    }
+    if (searchlabel) searchlabel.removeAttribute("aria-hidden");
 
-    function removeSearchAttr() {
-      if (searchInput) {
-        searchInput.removeAttribute("tabindex");
-        searchInput.removeAttribute("aria-hidden");
-      }
-      if (searchSubmit) {
-        searchSubmit.removeAttribute("tabindex");
-        searchSubmit.removeAttribute("aria-hidden");
-      }
-      if (searchReset) {
-        searchReset.removeAttribute("tabindex");
-        searchReset.removeAttribute("aria-hidden");
-      }
-      if (searchlabel) searchlabel.removeAttribute("aria-hidden");
+    if (searchContainer) searchContainer.removeAttribute("aria-hidden");
+  };
 
-      if (searchContainer) searchContainer.removeAttribute("aria-hidden");
+  const setSearchAttr = () => {
+    if (searchInput) {
+      searchInput.setAttribute("tabindex", "-1");
+      searchInput.setAttribute("aria-hidden", "true");
     }
+    if (searchSubmit) {
+      searchSubmit.setAttribute("tabindex", "-1");
+      searchSubmit.setAttribute("aria-hidden", "true");
+    }
+    if (searchReset) {
+      searchReset.setAttribute("tabindex", "-1");
+      searchReset.setAttribute("aria-hidden", "true");
+    }
+    if (searchlabel) searchlabel.setAttribute("aria-hidden", "true");
 
-    function setSearchAttr() {
-      if (searchInput) {
-        searchInput.setAttribute("tabindex", "-1");
-        searchInput.setAttribute("aria-hidden", "true");
-      }
-      if (searchSubmit) {
-        searchSubmit.setAttribute("tabindex", "-1");
-        searchSubmit.setAttribute("aria-hidden", "true");
-      }
-      if (searchReset) {
-        searchReset.setAttribute("tabindex", "-1");
-        searchReset.setAttribute("aria-hidden", "true");
-      }
-      if (searchlabel) searchlabel.setAttribute("aria-hidden", "true");
+    if (searchContainer) searchContainer.setAttribute("aria-hidden", "true");
+  };
 
-      if (searchContainer) searchContainer.setAttribute("aria-hidden", "true");
+  // Make Search form tabable if it's featured
+  if (searchContainer) {
+    if (searchContainer.classList.contains("featured-search")) {
+      removeSearchAttr();
+    } else {
+      setSearchAttr();
     }
+  }
 
-    // Make Search form tabable if it's featured
-    if (searchContainer) {
-      if (searchContainer.classList.contains("featured-search")) {
-        removeSearchAttr();
-      } else {
-        setSearchAttr();
-      }
+  const setSearchTop = () => {
+    // calulation search box top position
+    const searchtop =
+      headerHeight - utilityHeight - alertbannerHeight - navigationHeight;
+    if (!mobileControlVisible() && searchbox) {
+      searchbox.style.top = `${Math.max(searchtop, 55)}px`;
     }
+  };
 
-    // on alert close event
-    document.querySelectorAll(".alert-banner .close").forEach(oneClose => {
-      oneClose.addEventListener("click", searchTop);
-    });
-
-    ariaHidden();
+  // on alert close event
+  document.querySelectorAll(".alert-banner .close").forEach(oneClose => {
+    oneClose.addEventListener("click", setSearchTop);
   });
 
   // Calculation search box top property on the scroll for the fixed nav
   window.addEventListener("scroll", () => {
-    if (!mobileView_for_search()) {
+    if (!mobileControlVisible()) {
       // setting timeout before calculating the search box top property otherwise it can take into account transitional values.
-      setTimeout(searchTop, 400);
+      setTimeout(setSearchTop, 400);
 
       // remove featured search on scroll in desktop
       const FeaturedSearch = document.querySelector("nav ~ #head-search");
@@ -1455,45 +1478,14 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
 
   //  search box top position if browser window is resized
   window.addEventListener("resize", () => {
-    searchTop();
-    ariaHidden();
+    setSearchTop();
+    setSearchContainerAriaHidden();
   });
 
-  function searchTop() {
-    // calulation search box top position
-    const searchtop =
-      headerHeight - utilityHeight - alertbannerHeight - navigationHeight;
-    if (!mobileView_for_search() && searchbox) {
-      searchbox.style.top = `${Math.max(searchtop, 55)}px`;
-    }
-  }
-
-  function ariaHidden() {
-    if (searchContainer) {
-      if (featuredsearch) {
-        searchContainer.removeAttribute("aria-hidden");
-        document.querySelector("[name='q']").removeAttribute("tabindex");
-        document
-          .querySelector(".gsc-search-button")
-          .removeAttribute("tabindex");
-      } else {
-        searchContainer.setAttribute("aria-hidden", "true");
-      }
-    }
-  }
-
-  const mobileView_for_search = () => {
-    const mobileElement = document.querySelector(
-      ".global-header .mobile-controls"
-    );
+  setSearchContainerAriaHidden();
+});
 
-    if (mobileElement) {
-      return getComputedStyle(mobileElement)["display"] !== "none";
-    } else {
-      return false; // or whatever is supposed to be returned when there is no header
-    }
-  };
-})(); // call out the function on the page load
+// call out the function on the page load
 
 //@ts-check
 /* -----------------------------------------
@@ -1502,68 +1494,73 @@ window.customElements.define("cagov-accordion", CaGovAccordion);
 ----------------------------------------- */
 
 // Displaying HTML Source code in HTML Page
+(() => {
+  const entityMap = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+    "/": "&#x2F;"
+  };
 
-const entityMap = {
-  "&": "&amp;",
-  "<": "&lt;",
-  ">": "&gt;",
-  '"': "&quot;",
-  "'": "&#39;",
-  "/": "&#x2F;"
-};
-
-const escapeHtml = (/** @type {string} */ string) =>
-  string.replace(/[&<>"'/]/g, s => entityMap[s]);
-
-function copyCode(/** @type {Element} */ btnElem) {
-  const codeblock = btnElem.previousElementSibling;
-  if (codeblock) {
-    // copy the text
-    if (codeblock.tagName.toLowerCase() == "pre") {
-      navigator.clipboard.writeText(codeblock.querySelector("code").innerText);
-    } else {
-      //TextArea
-      navigator.clipboard.writeText(
-        /** @type { HTMLTextAreaElement} */ (codeblock).value
-      );
+  const escapeHtml = (/** @type {string} */ string) =>
+    string.replace(/[&<>"'/]/g, s => entityMap[s]);
+
+  function copyCode(/** @type {Element} */ btnElem) {
+    const codeblock = btnElem.previousElementSibling;
+    if (codeblock) {
+      // copy the text
+      if (codeblock.tagName.toLowerCase() == "pre") {
+        navigator.clipboard.writeText(
+          codeblock.querySelector("code").innerText
+        );
+      } else {
+        //TextArea
+        navigator.clipboard.writeText(
+          /** @type { HTMLTextAreaElement} */ (codeblock).value
+        );
+      }
+      // select the text
+      const range = document.createRange();
+      range.selectNode(codeblock);
+      window.getSelection().removeAllRanges();
+      window.getSelection().addRange(range);
+      // replace the button icon
+      //btnElem.querySelector("span").classList.remove("ca-gov-icon-copy");
+      //btnElem.querySelector("span").classList.add("ca-gov-icon-check-mark");
+      btnElem.innerHTML =
+        '<span class="ca-gov-icon-check-mark"></span> Code copied';
     }
-    // select the text
-    const range = document.createRange();
-    range.selectNode(codeblock);
-    window.getSelection().removeAllRanges();
-    window.getSelection().addRange(range);
-    // replace the button icon
-    //btnElem.querySelector("span").classList.remove("ca-gov-icon-copy");
-    //btnElem.querySelector("span").classList.add("ca-gov-icon-check-mark");
-    btnElem.innerHTML =
-      '<span class="ca-gov-icon-check-mark"></span> Code copied';
   }
-}
 
-window.addEventListener("load", () => {
-  const codeblock = document.querySelectorAll("pre code, textarea.sourcecode");
-
-  for (let i = 0, len = codeblock.length; i < len; i++) {
-    const dom = codeblock[i];
-    if (dom.tagName.toLowerCase() == "code") {
-      let html = dom.innerHTML;
-      html = escapeHtml(html);
-      dom.innerHTML = html;
-    }
-    // Create a 'copy code' button, insert it after the <pre> tag
-    const newDiv = document.createElement("button");
-    newDiv.onclick = function () {
-      copyCode(/** @type {HTMLElement} */ (this));
-    };
-    newDiv.classList.add("btn", "btn-outline-primary");
-    newDiv.innerHTML = "<span class='ca-gov-icon-copy'></span> Copy code";
-    if (dom.tagName.toLowerCase() == "code") {
-      dom.parentElement.after(newDiv);
-    } else {
-      dom.after(newDiv);
+  window.addEventListener("load", () => {
+    const codeblock = document.querySelectorAll(
+      "pre code, textarea.sourcecode"
+    );
+
+    for (let i = 0, len = codeblock.length; i < len; i++) {
+      const dom = codeblock[i];
+      if (dom.tagName.toLowerCase() == "code") {
+        let html = dom.innerHTML;
+        html = escapeHtml(html);
+        dom.innerHTML = html;
+      }
+      // Create a 'copy code' button, insert it after the <pre> tag
+      const newDiv = document.createElement("button");
+      newDiv.onclick = function () {
+        copyCode(/** @type {HTMLElement} */ (this));
+      };
+      newDiv.classList.add("btn", "btn-outline-primary");
+      newDiv.innerHTML = "<span class='ca-gov-icon-copy'></span> Copy code";
+      if (dom.tagName.toLowerCase() == "code") {
+        dom.parentElement.after(newDiv);
+      } else {
+        dom.after(newDiv);
+      }
     }
-  }
-});
+  });
+})();
 
 //@ts-check
 
@@ -1571,7 +1568,7 @@ window.addEventListener("load", () => {
    TABS -- custom accessible tabs
 ----------------------------------------- */
 
-(function () {
+window.addEventListener("load", () => {
   // Get relevant elements and collections
   const allTabs = document.querySelectorAll(".tabs");
   allTabs.forEach(tabbed => {
@@ -1663,7 +1660,7 @@ window.addEventListener("load", () => {
     tabs[0].setAttribute("aria-selected", "true");
     panels[0].hidden = false;
   });
-})();
+});
 
 //@ts-check
 
@@ -1737,15 +1734,30 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 
 //@ts-check
-const returnTop = document.querySelector(".return-top");
+window.addEventListener("load", () => {
+  document.querySelectorAll(".return-top").forEach(returnTop =>
+    returnTop.addEventListener("click", () => {
+      document.body.scrollTop = 0; // For Safari
+      document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+    })
+  );
 
-// Add on-click event
-if (returnTop) returnTop.addEventListener("click", goToTopFunction);
+  // Back to top link in the global footer
+  document
+    .querySelectorAll("a[href='#skip-to-content']")
+    .forEach(backToTop =>
+      backToTop.addEventListener("click", backToTopFunction)
+    );
 
-function goToTopFunction() {
-  document.body.scrollTop = 0; // For Safari
-  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
-}
+  /**
+   * @param {Event} event
+   */
+  const backToTopFunction = event => {
+    event.preventDefault();
+    document.body.scrollTop = 0; // For Safari
+    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+  };
+});
 
 // If an user scrolls down the page for more than 400px activate back to top button
 // othervise keep it invisible
@@ -1757,6 +1769,8 @@ window.addEventListener(
   "scroll",
   () => {
     const returnTopButton = document.querySelector(".return-top");
+    if (!returnTopButton) return;
+
     const st = window.pageYOffset || document.documentElement.scrollTop;
     if (st > lastScrollTop) {
       // downscroll code
@@ -1787,27 +1801,13 @@ window.addEventListener(
 );
 
 // Hittin' rock bottom
-window.onscroll = () => {
+window.addEventListener("scroll", () => {
   const returnTopButton = document.querySelector(".return-top");
+  if (!returnTopButton) return;
   if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
     returnTopButton.classList.add("is-visible");
   }
-};
-
-// Back to top link in the global footer
-const backToTop = document.querySelector("a[href='#skip-to-content']");
-if (backToTop) {
-  backToTop.addEventListener("click", backToTopFunction);
-}
-
-/**
- * @param {Event} event
- */
-function backToTopFunction(event) {
-  event.preventDefault();
-  document.body.scrollTop = 0; // For Safari
-  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
-}
+});
 
 //@ts-check
 
@@ -1815,36 +1815,36 @@ function backToTopFunction(event) {
  SIDE NAVIGATION - /source/js/cagov/side-navigation.js
 ----------------------------------------- */
 
-(() => {
+window.addEventListener("load", () => {
   const siteHeader = document.querySelector("header");
   const sidenavigation = document.querySelector(".side-navigation");
-  let allSidenavLinks = sidenavigation?.querySelectorAll(".side-navigation a");
-  const mainContentSideNavCont = sidenavigation?.closest("div");
-  sidenavigation?.setAttribute("id", "side-navigation");
+  if (!sidenavigation || !siteHeader) return;
+  const allSidenavLinks = sidenavigation.querySelectorAll(".side-navigation a");
+  const mainContentSideNavCont = sidenavigation.closest("div");
+  sidenavigation.setAttribute("id", "side-navigation");
   const topposition = localStorage.getItem("sidebar-scroll");
   const mobileCntls = document.querySelector(".global-header .mobile-controls");
   if (!mobileCntls) return;
   let mobileControlsDisplay = window.getComputedStyle(mobileCntls).display; // Side nav height vs viewport
   const siteHeaderHeight = siteHeader ? siteHeader.clientHeight : 0;
   const mobileView$3 = () =>
-    getComputedStyle(document.querySelector(".global-header .mobile-controls"))[
-      "display"
-    ] !== "none";
+    getComputedStyle(mobileCntls)["display"] !== "none";
   let timeout = 0;
   const delay = 250; // delay between calls
-  let mobileSideNavDiv;
-  let mobileSideNavCont;
-  let sidenavToggleBtn;
+  /** @type {HTMLElement} */
+  let mobileSideNavDiv,
+    /** @type {HTMLDivElement} */ mobileSideNavCont,
+    /** @type {HTMLButtonElement} */ sidenavToggleBtn;
 
-  function createMobileSideNavButton() {
+  const createMobileSideNavButton = () => {
     // get first side nav element
-    /** @type {HTMLAnchorElement} */
+    /** @type {HTMLAnchorElement | null} */
     const sidenavTItle = document.querySelector(".side-navigation a, .sidenav");
 
     if (sidenavTItle) {
       // get text for the button for first side nav element
       let btnText = sidenavTItle.innerText;
-      const btnTextSpan = sidenavTItle.querySelector("span")?.innerText; // removing the sr-only span and it's content
+      const btnTextSpan = sidenavTItle.querySelector("span")?.innerText || ""; // removing the sr-only span and it's content
       btnText = btnText.replace(btnTextSpan, "").trim();
       // create button container
       const sidenavMobile = document.createElement("aside");
@@ -1869,37 +1869,40 @@ function backToTopFunction(event) {
       // add click event
       sidenavToggleBtn.addEventListener("click", toggleSideNav);
     }
-  }
+  };
 
-  function createmobileSideNavDiv() {
+  const createmobileSideNavDiv = () => {
     mobileSideNavDiv = document.createElement("aside");
     mobileSideNavDiv.setAttribute("class", "mobile-sidenav");
     mobileSideNavCont = document.createElement("div");
     mobileSideNavCont.setAttribute("class", "container");
     mobileSideNavDiv.append(mobileSideNavCont);
     siteHeader.after(mobileSideNavDiv);
-  }
+  };
 
   // MOBILE Side nav
-  function moveSideNavToHeader() {
-    mobileSideNavCont?.append(sidenavigation);
+  const moveSideNavToHeader = () => {
+    if (mobileSideNavCont) {
+      mobileSideNavCont.append(sidenavigation);
+    }
+
     sidenavigation.setAttribute("aria-hidden", "true");
     allSidenavLinks?.forEach(el => {
       el.setAttribute("tabindex", "-1");
     });
-  }
+  };
 
   // DESKTOP Side nav
-  function moveSideNavToMainContent() {
+  const moveSideNavToMainContent = () => {
     mainContentSideNavCont?.append(sidenavigation);
     sidenavigation.removeAttribute("aria-hidden");
     allSidenavLinks?.forEach(el => {
       el.removeAttribute("tabindex");
     });
-  }
+  };
 
   // Mobile Side Nav Button click function
-  function toggleSideNav() {
+  const toggleSideNav = () => {
     mobileSideNavDiv.classList.toggle("visible");
     // Open
     if (mobileSideNavDiv.classList.contains("visible")) {
@@ -1917,7 +1920,7 @@ function backToTopFunction(event) {
         el.setAttribute("tabindex", "-1");
       });
     }
-  }
+  };
 
   // Set active class on nav-heading links
   function addActiveClass() {
@@ -1930,14 +1933,14 @@ function backToTopFunction(event) {
         active_link[i].className += " active";
   }
 
-  function sidenavOverflow() {
+  const sidenavOverflow = () => {
     if (!mobileView$3()) {
       const viewportheight = document.documentElement.clientHeight;
       const viewportMinusHeader = viewportheight - siteHeaderHeight - 100;
 
       if (
         viewportMinusHeader <=
-        document.querySelector(".side-navigation").clientHeight
+        (document.querySelector(".side-navigation")?.clientHeight || 0)
       ) {
         sidenavigation.classList.add("overflow-auto"); // sidenavigation.setAttribute("style", "max-height:" + viewportMinusHeader + "px")
       } else {
@@ -1964,37 +1967,35 @@ function backToTopFunction(event) {
         sidenavigation.scrollTop.toString()
       );
     });
-  }
+  };
 
-  if (sidenavigation) {
-    // ONLOAD
-    addActiveClass();
-    createmobileSideNavDiv();
-    createMobileSideNavButton();
+  // ONLOAD
+  addActiveClass();
+  createmobileSideNavDiv();
+  createMobileSideNavButton();
 
+  if (mobileControlsDisplay == "block") {
+    moveSideNavToHeader();
+  }
+  // on resize
+  window.addEventListener("resize", () => {
+    mobileControlsDisplay = getComputedStyle(mobileCntls).display; // clear the timeout
+
+    window.clearTimeout(timeout); // start timing for event "completion"
+    timeout = window.setTimeout(sidenavOverflow, delay); // if mobile
     if (mobileControlsDisplay == "block") {
-      moveSideNavToHeader();
+      moveSideNavToHeader(); // if desctop
+    } else {
+      moveSideNavToMainContent();
     }
-    // on resize
-    window.addEventListener("resize", () => {
-      mobileControlsDisplay = getComputedStyle(mobileCntls).display; // clear the timeout
-
-      window.clearTimeout(timeout); // start timing for event "completion"
-      timeout = window.setTimeout(sidenavOverflow, delay); // if mobile
-      if (mobileControlsDisplay == "block") {
-        moveSideNavToHeader(); // if desctop
-      } else {
-        moveSideNavToMainContent();
-      }
-    });
-    sidenavOverflow();
-  }
-})();
+  });
+  sidenavOverflow();
+});
 
 //@ts-check
 
 /* EXTERNAL LINK ICON */
-function linkAnnotator() {
+window.addEventListener("load", () => {
   const ext = '<span class="external-link-icon" aria-hidden="true"></span>';
 
   // Check if link is external function
@@ -2027,15 +2028,13 @@ function linkAnnotator() {
       linkElement.innerHTML += ext; // += concatenates to external links
     }
   });
-}
-
-linkAnnotator();
+});
 
 //@ts-check
 /* -----------------------------------------
    PAGE NAVIGATION - /source/js/cagov/page-navigation.js
 ----------------------------------------- */
-(() => {
+window.addEventListener("load", () => {
   const headings = document.querySelectorAll("h2");
   const h2heading = document.querySelector("h2");
   const pagenav = document.querySelector(".page-navigation");
@@ -2083,7 +2082,7 @@ linkAnnotator();
     pagenav.appendChild(pagenavUL);
     pagenav.setAttribute("aria-labelledby", "on-this-page-navigation-label");
   }
-})(); // call out the function on the page load
+}); // call out the function on the page load
 
 //@ts-check
 /* -----------------------------------------
@@ -2368,198 +2367,177 @@ class CAGovPagination extends HTMLElement {
     );
   }
 }
-
-window.customElements.define("cagov-pagination", CAGovPagination);
-
+window.addEventListener("load", () => {
+  window.customElements.define("cagov-pagination", CAGovPagination);
+});
 //export { CAGovPagination };
 
 //@ts-check
 
-(() => {
+window.addEventListener("load", () => {
   // VARIABLES
-  const bodyCont = document.querySelector("body");
-  const mainNav = document.querySelector(".main-navigation");
   const navButton = document.querySelector(".toggle-menu");
-  const navSearchCont = document.querySelector(".navigation-search");
-  const mobileCntls = document.querySelector(".global-header .mobile-controls");
-  if (!mobileCntls) return;
-  const mainCont = document.querySelector(".main-content");
-  const footerGlobal = document.querySelector("footer");
-  const footerSite = document.querySelector(".site-footer");
-  const headerutility = document.querySelector(".utility-header");
-  const regularHeader = document.querySelector("header");
-  const headerutilityLinksCont = document.querySelector(
-    ".utility-header .container .flex-row"
-  );
-  const navButtonCont = document.querySelector(
-    ".mobile-controls .main-nav-icons"
-  );
-  const siteBranding = document.querySelector(".branding");
-  const utilityLinks = document.querySelector(".settings-links");
-  let mobileControlsDisplay = window.getComputedStyle(mobileCntls).display;
-  let allNavLinks;
-  let allUtilityLinks;
-  // We need timeout here to make sure navigation is created first (becasue naviagion.js is creating button elements dynamicaly) and then we can assign all thise links to our variable
-  setTimeout(() => {
-    allNavLinks = document.querySelectorAll(
+  if (!navButton) return;
+
+  const getAllNavLinks = () =>
+    document.querySelectorAll(
       '.navigation-search a.first-level-link, .navigation-search button.first-level-btn, .navigation-search input, .navigation-search button, .navigation-search [tabindex]:not([tabindex="-1"])'
     );
-    allUtilityLinks = document.querySelectorAll(
+
+  const getAllUtilityLinks = () =>
+    document.querySelectorAll(
       '.settings-links a, .settings-links button, .settings-links input, .settings-links select, .settings-links [tabindex]:not([tabindex="-1"])'
     );
-  }, 100);
 
   // all focusable elements other than navigation
-  const allBodyLinks = document.querySelectorAll(
-    '.utility-header .social-media-links a, .utility-header .social-media-links input, .utility-header .social-media-links button, .utility-header .social-media-links [tabindex]:not([tabindex="-1"]), .branding a, .branding button, .branding input, .branding select, .main-content a[href], .main-content button, .main-content input, .main-content textarea, .main-content select, .main-content details, .main-content [tabindex]:not([tabindex="-1"]), .site-footer a[href], .site-footer button, .site-footer input, .site-footer textarea, .site-footer select, .site-footer details, .site-footer [tabindex]:not([tabindex="-1"]), footer a[href], footer button, footer input, footer textarea, footer select, footer details, footer [tabindex]:not([tabindex="-1"])'
-  );
+  const getAllBodyLinks = () =>
+    document.querySelectorAll(
+      '.utility-header .social-media-links a, .utility-header .social-media-links input, .utility-header .social-media-links button, .utility-header .social-media-links [tabindex]:not([tabindex="-1"]), .branding a, .branding button, .branding input, .branding select, .main-content a[href], .main-content button, .main-content input, .main-content textarea, .main-content select, .main-content details, .main-content [tabindex]:not([tabindex="-1"]), .site-footer a[href], .site-footer button, .site-footer input, .site-footer textarea, .site-footer select, .site-footer details, .site-footer [tabindex]:not([tabindex="-1"]), footer a[href], footer button, footer input, footer textarea, footer select, footer details, footer [tabindex]:not([tabindex="-1"])'
+    );
 
   // create container for drawer mobile nav items
   const mobileItemsCont = document.createElement("div");
   mobileItemsCont.setAttribute("class", "nav-drawer");
 
   // move mobile navigation toggle button back into mobile controls container
-  function moveNavToggleButtonToMobileControlsContainer() {
+  const moveNavToggleButtonToMobileControlsContainer = () => {
+    const navButtonCont = document.querySelector(
+      ".mobile-controls .main-nav-icons"
+    );
     setTimeout(() => {
       navButton.setAttribute("aria-expanded", "false");
       navButtonCont?.append(navButton);
     }, 300);
-  }
+  };
 
-  // ONLOAD
-  window.onload = function () {
-    // move duplicated logo to navigation drawer section
-    navSearchCont?.prepend(mobileItemsCont);
+  const setHidden = (/** @type {boolean} */ hide) => {
+    const mainCont = document.querySelector(".main-content");
+    const footerGlobal = document.querySelector("footer");
+    const footerSite = document.querySelector(".site-footer");
+    const headerutility = document.querySelector(".utility-header");
+    const siteBranding = document.querySelector(".branding");
+    const regularHeader = document.querySelector("header");
 
-    // if mobile
-    if (mobileControlsDisplay == "block") {
-      mobileNavDefault();
-      // if desktop
+    if (hide) {
+      mainCont?.setAttribute("aria-hidden", "true");
+      footerGlobal?.setAttribute("aria-hidden", "true");
+      footerSite?.setAttribute("aria-hidden", "true");
+      headerutility?.setAttribute("aria-hidden", "true");
+      siteBranding?.setAttribute("aria-hidden", "true");
+      regularHeader?.classList.add("nav-overlay");
     } else {
-      desktopNavDefault();
+      //show
+      mainCont?.removeAttribute("aria-hidden");
+      footerGlobal?.removeAttribute("aria-hidden");
+      footerSite?.removeAttribute("aria-hidden");
+      headerutility?.removeAttribute("aria-hidden");
+      siteBranding?.removeAttribute("aria-hidden");
+      regularHeader?.classList.remove("nav-overlay");
     }
   };
 
   // Button click open and close menu function
-  function openMenu() {
+  const openMenu = () => {
     mobileItemsCont.append(navButton);
+    const navSearchCont = document.querySelector(".navigation-search");
     navSearchCont?.classList.toggle("visible");
     navSearchCont?.classList.toggle("not-visible");
     // Open
     if (navSearchCont?.classList.contains("visible")) {
       navButton.setAttribute("aria-expanded", "true");
-      bodyCont?.classList.add("overflow-hidden");
+      document.body.classList.add("overflow-hidden");
       navSearchCont?.setAttribute("aria-hidden", "false");
       // make links focusable
-      allNavLinks?.forEach(el => {
-        el.removeAttribute("tabindex");
-      });
-      allUtilityLinks?.forEach(el => {
-        el.removeAttribute("tabindex");
-      });
+      getAllNavLinks().forEach(el => el.removeAttribute("tabindex"));
+      getAllUtilityLinks().forEach(el => el.removeAttribute("tabindex"));
       // make all the rest of the links not focusable
-      allBodyLinks?.forEach(el => {
-        el.setAttribute("tabindex", "-1");
-      });
+      getAllBodyLinks().forEach(el => el.setAttribute("tabindex", "-1"));
       // Hide all the website areas (add aria-hidden)
-      mainCont?.setAttribute("aria-hidden", "true");
-      footerGlobal?.setAttribute("aria-hidden", "true");
-      footerSite?.setAttribute("aria-hidden", "true");
-      headerutility?.setAttribute("aria-hidden", "true");
-      siteBranding?.setAttribute("aria-hidden", "true");
-      regularHeader?.classList.add("nav-overlay");
+      setHidden(true);
+
       // Close
     } else {
       navButton.setAttribute("aria-expanded", "false");
-      bodyCont?.classList.remove("overflow-hidden");
+      document.body.classList.remove("overflow-hidden");
       navSearchCont?.setAttribute("aria-hidden", "true");
       // removing focus
-      allNavLinks?.forEach(el => {
-        el.setAttribute("tabindex", "-1");
-      });
-      allUtilityLinks?.forEach(el => {
-        el.setAttribute("tabindex", "-1");
-      });
-      allBodyLinks?.forEach(el => {
-        el.removeAttribute("tabindex");
-      });
+      getAllNavLinks().forEach(el => el.setAttribute("tabindex", "-1"));
+      getAllUtilityLinks().forEach(el => el.setAttribute("tabindex", "-1"));
+      getAllBodyLinks().forEach(el => el.removeAttribute("tabindex"));
       // remove aria hidden for the rest of the site
-      mainCont?.removeAttribute("aria-hidden");
-      footerGlobal?.removeAttribute("aria-hidden");
-      footerSite?.removeAttribute("aria-hidden");
-      headerutility?.removeAttribute("aria-hidden");
-      siteBranding?.removeAttribute("aria-hidden");
-      regularHeader?.classList.remove("nav-overlay");
+      setHidden(false);
       moveNavToggleButtonToMobileControlsContainer();
     }
-  }
+  };
 
   // Default state for mobile
-  function mobileNavDefault() {
+  const mobileNavDefault = () => {
     moveNavToggleButtonToMobileControlsContainer();
-    mainNav?.before(utilityLinks);
-    bodyCont?.classList.remove("overflow-hidden");
+    const mainNav = document.querySelector(".main-navigation");
+    const utilityLinks = document.querySelector(".settings-links");
+    if (mainNav && utilityLinks) mainNav.before(utilityLinks);
+    document.body.classList.remove("overflow-hidden");
+
+    const navSearchCont = document.querySelector(".navigation-search");
     navSearchCont?.classList.add("not-visible");
     navSearchCont?.classList.remove("visible");
     navSearchCont?.setAttribute("aria-hidden", "true");
     // removing focus
-    allNavLinks?.forEach(el => {
-      el.setAttribute("tabindex", "-1");
-    });
-    allUtilityLinks?.forEach(el => {
-      el.setAttribute("tabindex", "-1");
-    });
-    allBodyLinks?.forEach(el => {
-      el.removeAttribute("tabindex");
-    });
+    getAllNavLinks().forEach(el => el.setAttribute("tabindex", "-1"));
+    getAllUtilityLinks().forEach(el => el.setAttribute("tabindex", "-1"));
+    getAllBodyLinks().forEach(el => el.removeAttribute("tabindex"));
     // remove aria hidden for the rest of the site
-    mainCont?.removeAttribute("aria-hidden");
-    footerGlobal?.removeAttribute("aria-hidden");
-    footerSite?.removeAttribute("aria-hidden");
-    headerutility?.removeAttribute("aria-hidden");
-    siteBranding?.removeAttribute("aria-hidden");
-    regularHeader?.classList.remove("nav-overlay");
-  }
+    setHidden(false);
+  };
 
   // Default state for desktop
-  function desktopNavDefault() {
+  const desktopNavDefault = () => {
     moveNavToggleButtonToMobileControlsContainer();
-    headerutilityLinksCont?.append(utilityLinks);
-    bodyCont?.classList.remove("overflow-hidden");
+    const utilityLinks = document.querySelector(".settings-links");
+    const headerutilityLinksCont = document.querySelector(
+      ".utility-header .container .flex-row"
+    );
+    if (utilityLinks && headerutilityLinksCont)
+      headerutilityLinksCont.append(utilityLinks);
+    document.body.classList.remove("overflow-hidden");
+    const navSearchCont = document.querySelector(".navigation-search");
     navSearchCont?.classList.remove("visible");
     navSearchCont?.classList.remove("not-visible");
     navSearchCont?.setAttribute("aria-hidden", "false");
-    allNavLinks?.forEach(el => {
-      el.removeAttribute("tabindex");
-    });
-    allUtilityLinks?.forEach(el => {
-      el.removeAttribute("tabindex");
-    });
-    allBodyLinks?.forEach(el => {
-      el.removeAttribute("tabindex");
-    });
+    getAllNavLinks().forEach(el => el.removeAttribute("tabindex"));
+    getAllUtilityLinks().forEach(el => el.removeAttribute("tabindex"));
+    getAllBodyLinks().forEach(el => el.removeAttribute("tabindex"));
     // remove aria hidden for the rest of the site
-    mainCont?.removeAttribute("aria-hidden");
-    footerGlobal?.removeAttribute("aria-hidden");
-    footerSite?.removeAttribute("aria-hidden");
-    headerutility?.removeAttribute("aria-hidden");
-    siteBranding?.removeAttribute("aria-hidden");
-    regularHeader?.classList.remove("nav-overlay");
-  }
+    setHidden(false);
+  };
 
   // Button Click event
   navButton.addEventListener("click", openMenu);
 
-  // on resize function (hide mobile nav)
-  window.addEventListener("resize", () => {
-    // set changing wariable in here
-    mobileControlsDisplay = getComputedStyle(mobileCntls).display;
-    // if mobile
+  const mobileCheck = () => {
+    const mobileCntls = document.querySelector(
+      ".global-header .mobile-controls"
+    );
+
+    const mobileControlsDisplay = mobileCntls
+      ? window.getComputedStyle(mobileCntls).display
+      : "";
+
     if (mobileControlsDisplay == "block") {
       mobileNavDefault();
-      // if desctop
+      // if desktop
     } else {
       desktopNavDefault();
     }
-  });
-})();
+  };
+
+  // on resize function (hide mobile nav)
+  window.addEventListener("resize", mobileCheck);
+
+  // ONLOAD
+  // move duplicated logo to navigation drawer section
+  const navSearchCont = document.querySelector(".navigation-search");
+  navSearchCont?.prepend(mobileItemsCont);
+
+  mobileCheck();
+});