diff --git a/hugo/assets/scripts/components/async-loading.js b/hugo/assets/scripts/components/async-loading.js index c43c864e648..f86496caf1e 100644 --- a/hugo/assets/scripts/components/async-loading.js +++ b/hugo/assets/scripts/components/async-loading.js @@ -10,6 +10,7 @@ import {updateMainContentAnchors, reloadWistiaVidScripts, gtag, getCookieByName import configDocs from '../config/config-docs'; import { redirectCodeLang, addCodeTabEventListeners, addCodeBlockVisibilityToggleEventListeners, activateCodeLangNav, toggleMultiCodeLangNav } from './code-languages'; // eslint-disable-line import/no-cycle import { loadInstantSearch } from './instantsearch'; +import { getPathElement } from '../datadog-docs'; // eslint-disable-line import/no-cycle const { env } = document.documentElement.dataset; const { gaTag } = configDocs[env]; @@ -177,6 +178,17 @@ function loadPage(newUrl) { // update mainContent-wrapper classes mainContentWrapper.className = `${newmainContentWrapper.classList}`; + + // left-nav.html renders scoped to the page's section, so it must be resynced on + // every pjax nav or the old section's items would linger. innerHTML swap (not node + // replacement) preserves the click listener bound to this container in datadog-docs.js. + const currentLeftNav = document.querySelector('.sidenav-nav-js-load'); + const newLeftNav = newDocument.querySelector('.sidenav-nav-js-load'); + + if (currentLeftNav && newLeftNav) { + currentLeftNav.innerHTML = newLeftNav.innerHTML; + getPathElement(); + } } else { window.location.href = newUrl; } diff --git a/hugo/assets/scripts/datadog-docs.js b/hugo/assets/scripts/datadog-docs.js index 540839da76f..6abfec6446b 100644 --- a/hugo/assets/scripts/datadog-docs.js +++ b/hugo/assets/scripts/datadog-docs.js @@ -178,7 +178,7 @@ function hasParentLi(el) { } } -function getPathElement(event = null) { +export function getPathElement(event = null) { let path = window.location.pathname; const activeMenus = document.querySelectorAll( '.side .sidenav-nav-js-load .active, header .sidenav-nav-js-load .active' diff --git a/hugo/layouts/partials/nav/current-top-section.html b/hugo/layouts/partials/nav/current-top-section.html new file mode 100644 index 00000000000..cae83c0c8d8 --- /dev/null +++ b/hugo/layouts/partials/nav/current-top-section.html @@ -0,0 +1,26 @@ +{{- /* + Returns the pipe-delimited identifiers of every top-level main-menu entry (e.g. "apm", + "logs") whose URL matches the current page, or "" if none do. + + left-nav.html independently checks each top-level entry against the current page to decide + whether to render that entry's Levels 3-4, so this full match set -- not just one identifier + -- is what left-nav.html's rendered HTML depends on. It's used as that partial's partialCached + key; keying by .Section, or by only the first match, is unsound because menu entries can nest + (e.g. "security/" and "security/cloud_siem/" are sibling top-level entries), which would let + two pages with different actual matches share the same key. + + This menu is config-defined (plain url: strings, no page front matter), so entries have no + .Page and Hugo's .IsMenuCurrent/.HasMenuCurrent never match -- comparing URLs directly works. +*/ -}} +{{- $currentPage := . -}} +{{- $curURL := trim $currentPage.RelPermalink "/" -}} +{{- $result := "" -}} +{{- range .Site.Menus.main -}} + {{- range .Children -}} + {{- $menuURL := trim (.URL | relLangURL) "/" -}} + {{- if and (ne $menuURL "") (or (eq $curURL $menuURL) (strings.HasPrefix $curURL (printf "%s/" $menuURL))) -}} + {{- $result = print $result "|" .Identifier -}} + {{- end -}} + {{- end -}} +{{- end -}} +{{- $result -}} diff --git a/hugo/layouts/partials/nav/left-nav.html b/hugo/layouts/partials/nav/left-nav.html index d03fe06ecae..3f76e902501 100644 --- a/hugo/layouts/partials/nav/left-nav.html +++ b/hugo/layouts/partials/nav/left-nav.html @@ -22,6 +22,7 @@ {{ $url_without_anchor := "" }} {{ $currentPage := . }} +{{ $curURL := trim $currentPage.RelPermalink "/" }} {{ range $menu }} {{ if .HasChildren }} {{/* HEADER */}} @@ -29,8 +30,15 @@