side-nav-main -> -js-load. make partners load async (#30571)

Author: StefonSimmons

assets/scripts/datadog-docs.js

@@ -153,7 +153,7 @@ function getVisibleParentPath(ancestralEl, path){
 function hasParentLi(el) {
     while (el) {
         if (el.classList) {
-            if (el.classList.contains('sidenav-nav-main')) {
+            if (el.classList.contains('sidenav-nav-js-load')) {
                 break;
             }
 
@@ -174,7 +174,7 @@ function hasParentLi(el) {
 
 function getPathElement(event = null) {
     let path = window.location.pathname;
-    const activeMenus = document.querySelectorAll('.side .sidenav-nav-main .active, header .sidenav-nav-main .active');
+    const activeMenus = document.querySelectorAll('.side .sidenav-nav-js-load .active, header .sidenav-nav-js-load .active');
 
     // remove active class from all sidenav links to close all open menus
     for (let i = 0; i < activeMenus.length; i++) {
@@ -237,8 +237,8 @@ function getPathElement(event = null) {
 
 // remove open class from li elements and active class from <a> elements
 function closeNav() {
-    const activeMenus = document.querySelectorAll('.side .sidenav-nav-main .active, header .sidenav-nav-main .active');
-    const openMenus = document.querySelectorAll('.side .sidenav-nav-main .open, header .sidenav-nav-main .open');
+    const activeMenus = document.querySelectorAll('.side .sidenav-nav-js-load .active, header .sidenav-nav-js-load .active');
+    const openMenus = document.querySelectorAll('.side .sidenav-nav-js-load .open, header .sidenav-nav-js-load .open');
 
     for (let i = 0; i < activeMenus.length; i++) {
         activeMenus[i].classList.remove('active');
@@ -293,8 +293,8 @@ function updateSidebar(event) {
     }
 }
 
-const sideNav = document.querySelector('.side .sidenav-nav-main');
-const mobileNav = document.querySelector('header .sidenav-nav-main');
+const sideNav = document.querySelector('.side .sidenav-nav-js-load');
+const mobileNav = document.querySelector('header .sidenav-nav-js-load');
 
 if (sideNav) {
     sideNav.addEventListener('click', navClickEventHandler);

layouts/partials/nav/left-nav-partners.html

@@ -59,14 +59,14 @@
 {{ range $menu }}
     <!-- check if on /partners/ top level section page, don't generate sub anchors if true -->
     {{ if and (.HasChildren) (ne $currentPage.CurrentSection.RelPermalink "/partners/" ) }}
-        <li class="{{ if or ($currentPage.IsMenuCurrent $partnersMenu .) ($currentPage.HasMenuCurrent $partnersMenu .) (eq $currentEnURL .URL) }}active{{ end }}">
+        <li class="js-load {{ if or ($currentPage.IsMenuCurrent $partnersMenu .) ($currentPage.HasMenuCurrent $partnersMenu .) (eq $currentEnURL .URL) }}active{{ end }}">
             {{$url_without_anchor = ((index (split .URL "#") 0) | relLangURL)}}
             <a href="{{ (strings.TrimLeft "/" .URL) | absLangURL }}" data-path='{{ trim (print $branchPath $url_without_anchor) "/" }}'>
                 <span>{{ .Name }}</span>
             </a>
             <ul class="nav">
                 {{ range .Children }}
-                    <li class="row nav-item {{ if $currentPage.IsMenuCurrent $partnersMenu . }}active{{ end }}">
+                    <li class="js-load row nav-item {{ if $currentPage.IsMenuCurrent $partnersMenu . }}active{{ end }}">
                         {{$identifier := .Identifier}}
                         {{/*
                             lookup english equivalent of non-english menu item identifier attr.
@@ -86,7 +86,7 @@
             </ul>
         </li>
     {{ else }}
-        <li class="{{ if or ($currentPage.IsMenuCurrent $partnersMenu .) ($currentPage.HasMenuCurrent $partnersMenu .) (eq $currentEnURL .URL) }}active{{ end }}">
+        <li class="js-load {{ if or ($currentPage.IsMenuCurrent $partnersMenu .) ($currentPage.HasMenuCurrent $partnersMenu .) (eq $currentEnURL .URL) }}active{{ end }}">
             <a href="{{ (strings.TrimLeft "/" .URL) | absLangURL }}">
                 <span>{{ .Name }}</span>
             </a>

layouts/partials/sidenav/main-sidenav.html

@@ -15,7 +15,7 @@
             <div id="async-searchbar-mount"></div>
             {{ end}}
 
-            <div class="sidenav-nav sidenav-nav-main">
+            <div class="sidenav-nav sidenav-nav-js-load">
                 {{ partialCached "nav/left-nav.html" . .Section }}
             </div>
         </div>

layouts/partials/sidenav/partners-sidenav.html

@@ -17,7 +17,7 @@
                 <div id="async-searchbar-mount"></div>
             {{ end}}
 
-            <div class="sidenav-nav">
+            <div class="sidenav-nav sidenav-nav-js-load">
                 {{ partial "nav/left-nav-partners.html" . }}
             </div>
         </div>