From 00d22e5eb25183cbc7b4e76cb4c28638998162e9 Mon Sep 17 00:00:00 2001
From: Shogun <ShogunPanda@users.noreply.github.com>
Date: Mon, 31 Jan 2022 15:02:12 +0100
Subject: [PATCH] doc: move header options to a menu

---
 doc/api/index.md         |  1 -
 doc/api_assets/style.css |  9 +++++----
 doc/template.html        | 25 ++++++++++++++++++-------
 tools/doc/html.mjs       |  8 +++++++-
 4 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/doc/api/index.md b/doc/api/index.md
index f7b55c3a0cf132..c0980fd798cb06 100644
--- a/doc/api/index.md
+++ b/doc/api/index.md
@@ -7,7 +7,6 @@
 
 * [About this documentation](documentation.md)
 * [Usage and example](synopsis.md)
-* <a href="index.html">Index</a>
 
 <hr class="line"/>
 
diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
index cb9d6021ffd329..5d3b19a21befa1 100644
--- a/doc/api_assets/style.css
+++ b/doc/api_assets/style.css
@@ -165,9 +165,9 @@ em code {
   line-height: 1.5rem;
 }
 
-#gtoc li {
+/* #gtoc li {
   white-space: nowrap;
-}
+} */
 
 li.picker-header {
   position: relative;
@@ -800,6 +800,7 @@ kbd {
   position: sticky;
   top: -1px;
   padding-top: 1rem;
+  z-index: 1;
 }
 
 .header .pinner-header {
@@ -842,7 +843,7 @@ kbd {
   outline: var(--brand3) dotted 2px;
 }
 
-@media only screen and (max-width: 576px) {
+@media only screen and (max-width: 600px) {
   .header.is-pinned {
     position: relative;
   }
@@ -856,7 +857,7 @@ kbd {
   }
 }
 
-@media only screen and (min-width: 577px) {
+@media only screen and (min-width: 601px) {
   #gtoc > ul > li {
     display: inline;
     border-right: 1px currentColor solid;
diff --git a/doc/template.html b/doc/template.html
index 36eaa27ac86802..2da95cf1a72347 100644
--- a/doc/template.html
+++ b/doc/template.html
@@ -41,15 +41,26 @@ <h1>Node.js __VERSION__ documentation</h1>
           <ul>
             <li class="pinner-header">Node.js __VERSION__</li>
             __TOC_PICKER__
-            __ALTDOCS__
             __GTOC_PICKER__
-            <li>
-              <a href="all.html">View on single page</a>
-            </li>
-            <li>
-              <a href="__FILENAME__.json">View as JSON</a>
+            __ALTDOCS__
+            <li class="picker-header">
+              <a href="#">
+                <span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span>
+                Options
+              </a>
+        
+              <div class="picker">
+                <ul>
+                  <li>
+                    <a href="all.html">View on single page</a>
+                  </li>
+                  <li>
+                    <a href="__FILENAME__.json">View as JSON</a>
+                  </li>
+                  __EDIT_ON_GITHUB__    
+                </ul>
+              </div>
             </li>
-            __EDIT_ON_GITHUB__
           </ul>
         </div>
         <hr>
diff --git a/tools/doc/html.mjs b/tools/doc/html.mjs
index 5aa29bb486fd1b..1c5ad61182bc79 100644
--- a/tools/doc/html.mjs
+++ b/tools/doc/html.mjs
@@ -530,9 +530,15 @@ function gtocPicker(id) {
     return '';
   }
 
+  // Highlight the current module and add a link to the index
   const gtoc = gtocHTML.replace(
     `class="nav-${id}"`, `class="nav-${id} active"`
-  );
+  ).replace('</ul>', `
+      <li>
+        <a href="index.html">Index</a>
+      </li>
+    </ul>
+  `);
 
   return `
     <li class="picker-header">