Skip to content

update nav #39760

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
davidejones wants to merge 2 commits into
base: master
Choose a base branch
from
+23 −3
Draft

update nav #39760

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7a8578f
update nav
davidejones Sep 7, 2026
6397152
catch descendants too
davidejones Sep 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions hugo/assets/scripts/components/async-loading.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down Expand Up @@ -177,6 +178,20 @@ function loadPage(newUrl) {

// update mainContent-wrapper classes
mainContentWrapper.className = `${newmainContentWrapper.classList}`;

// The left nav is server-rendered scoped to the current page's top-level section
// (see hugo/layouts/partials/nav/left-nav.html), so its content must be synced on
// every navigation -- otherwise navigating into a different section would leave the
// old section's nav items in place instead of the new section's. Swapping innerHTML
// (rather than replacing the container node) preserves the click listener bound to
// it 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;
}
Expand Down
2 changes: 1 addition & 1 deletion hugo/assets/scripts/datadog-docs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
9 changes: 7 additions & 2 deletions hugo/layouts/partials/nav/left-nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,13 @@
<ul class="list-unstyled">
{{ range .Children }}
{{/* LEVEL 1 */}}
{{/* Levels 3-4 are only rendered for the top-level section containing the current page, to avoid
shipping every product's full sub-nav on every page (see DOCS nav HTML size investigation).
HasMenuCurrent is true only for descendants of this entry, not the entry's own page, so it's
combined with IsMenuCurrent to also cover being on the section's own landing page. */}}
{{ $isCurrentTopSection := or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
<li class="nav-top-level {{ if (not (or (in $excludeAsync .Identifier) (and (in .URL "api/") (not (in .URL "_api/")) (not (in .URL "-api/"))))) }} js-load {{ end }}
{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
{{ if $isCurrentTopSection }}active{{ end }}">
{{ $url_without_anchor = (index (split .URL "#") 0) }}
<a href="{{ .URL | relLangURL }}" class="d-flex align-items-center" data-path="{{ trim (print $branchPath ((print $url_without_anchor) | relLangURL)) "/" }}" data-skip="{{ .Params.skip | not | not }}">
{{ if .Pre }}
Expand All @@ -52,7 +57,7 @@
{{ end }}
<span>{{ .Name }}</span>
</a>
{{ if .HasChildren }}
{{ if (and .HasChildren $isCurrentTopSection) }}
<ul class="list-unstyled sub-menu {{ if (or (eq .Name "Guides") (eq .Name "Widget Types") (eq .Name "Monitor Types")) }} d-none {{ end }}">
{{/* LEVEL 3 */}}
{{ range .Children }}
Expand Down
Loading