doc: move header options to a menu

nodejs · Jan 31, 2022 · 00d22e5 · 00d22e5
1 parent 72f66f7
commit 00d22e5
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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">