docs: Hide "on this page" element when there are no headings (#31635)

Danilo Leal created 6 months ago

We were still showing the "On this page" element even when the page
didn't contain any h2s or h3s.

Release Notes:

- N/A

Change summary

docs/theme/page-toc.js | 13 +++++++++++++
1 file changed, 13 insertions(+)

Detailed changes

docs/theme/page-toc.js

@@ -59,6 +59,19 @@ const updateFunction = () => {
 window.addEventListener("load", () => {
   const pagetoc = getPagetoc();
   const headers = [...document.getElementsByClassName("header")];
+
+  const nonH1Headers = headers.filter(
+    (header) => !header.parentElement.tagName.toLowerCase().startsWith("h1"),
+  );
+  const sidetoc = document.querySelector(".sidetoc");
+
+  if (nonH1Headers.length === 0) {
+    if (sidetoc) {
+      sidetoc.style.display = "none";
+    }
+    return;
+  }
+
   headers.forEach((header) => {
     const link = Object.assign(document.createElement("a"), {
       textContent: header.text,