diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
index 8a6e6b066d6f5d..b954c88bf028fc 100644
--- a/doc/api_assets/style.css
+++ b/doc/api_assets/style.css
@@ -238,6 +238,12 @@ li.picker-header a span {
padding-left: 1rem;
}
+.picker li a.active,
+.picker li a.active:hover,
+.picker li a.active:focus {
+ font-weight: 700;
+}
+
.picker li:last-child a {
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
diff --git a/doc/template.html b/doc/template.html
index 63ca9d6a22a918..36eaa27ac86802 100644
--- a/doc/template.html
+++ b/doc/template.html
@@ -40,23 +40,9 @@
Node.js __VERSION__ documentation
-
+ __TOC_PICKER__
__ALTDOCS__
-
+ __GTOC_PICKER__
-
View on single page
@@ -114,12 +100,16 @@ Node.js __VERSION__ documentation
// Handle pickers with click/taps rather than hovers
const pickers = document.querySelectorAll('.picker-header');
- for(const picker of document.querySelectorAll('.picker-header')) {
- picker.addEventListener('click', function() {
- if(picker.classList.contains('expanded')) {
+ for(const picker of pickers) {
+ picker.addEventListener('click', e => {
+ if (!e.target.closest('.picker')) {
+ e.preventDefault();
+ }
+
+ if (picker.classList.contains('expanded')) {
picker.classList.remove('expanded');
} else {
- for(const other of pickers) {
+ for (const other of pickers) {
other.classList.remove('expanded');
}
diff --git a/tools/doc/html.mjs b/tools/doc/html.mjs
index 55f64697150554..bdf967507c58ac 100644
--- a/tools/doc/html.mjs
+++ b/tools/doc/html.mjs
@@ -99,7 +99,8 @@ export function toHTML({ input, content, filename, nodeVersion, versions }) {
.replace('__SECTION__', content.section)
.replace(/__VERSION__/g, nodeVersion)
.replace(/__TOC__/g, content.toc)
- .replace(/__TOC_PICKER__/g, content.tocPicker)
+ .replace(/__TOC_PICKER__/g, tocPicker(id, content))
+ .replace(/__GTOC_PICKER__/g, gtocPicker(id))
.replace(/__GTOC__/g, gtocHTML.replace(
`class="nav-${id}"`, `class="nav-${id} active"`))
.replace('__EDIT_ON_GITHUB__', editOnGitHub(filename))
@@ -523,3 +524,41 @@ function altDocs(filename, docCreated, versions) {
function editOnGitHub(filename) {
return `- Edit on GitHub
`;
}
+
+function gtocPicker(id) {
+ if (id === 'index') {
+ return '';
+ }
+
+ const gtoc = gtocHTML.replace(
+ `class="nav-${id}"`, `class="nav-${id} active"`
+ );
+
+ return `
+
+ `;
+}
+
+function tocPicker(id, content) {
+ if (id === 'index') {
+ return '';
+ }
+
+ return `
+
+ `;
+}