docgen: Make docs collapse better on small screens

This commit makes padding and margins smaller when the screen size
becomed smaller and when it is small enough it moves the navigation
to a collapseable topbar instead.

To achieve this the top-level layout has been changed from using
and fixed placed div for the navbar to use css grid instead.

When on a small screen the index pages' navigation is permanently
expanded to that the user does not have to expand it.

6 files changed, 442 insertions, 171 deletions

diff --git a/lib/erl_docgen/priv/css/otp_doc.css b/lib/erl_docgen/priv/css/otp_doc.css
index f9c84b7e1f..7a45a3a4f7 100644
--- a/lib/erl_docgen/priv/css/otp_doc.css
+++ b/lib/erl_docgen/priv/css/otp_doc.css
@@ -1,24 +1,26 @@
 /* standard OTP style sheet */
+/* We use three responsive breakpoints:
+ * 768px - mobile
+ * 992px - small screen
+ * 1200px - medium screen
+ * default - large screen
+*/
 body {
-  background: #fefefe;
-  color: #1a1a1a;
-  font-family: sans-serif;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  overflow: scroll;
-  height: 100%;
-  max-height: 100%;
-  line-height: 1.2em;
-  font-size: 16px;
+    background: #fefefe;
+    color: #1a1a1a;
+    font-family: sans-serif;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    max-height: 100%;
+    line-height: 1.2em;
+    font-size: 16px;
 }
 
 h1, h2, h3, h4, h5, h6{
- line-height: 1.2em;
+    line-height: 1.2em;
 }
 
-p             { max-width: 42em }
-
 .header       { background: #222; color: #fefefe }
 .top          { background: #efe }
 .otp          { background: #efe }
@@ -31,55 +33,201 @@ a:active       { color: #1c7cd6; text-decoration: none }
 a:visited      { color: #1b6ec2; text-decoration: none }
 
 #container {
-  width: 100%;
-  margin: 0;
-  background-color: #fefefe;
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    grid-template-areas: "leftnav content";
 }
 
 #leftnav {
-  position: fixed;
-  float: left;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 300px;
-  overflow:auto;
-  margin: 0;
-  padding: 1px;
-  border-right: 1px solid #ccc;
+    grid-area: leftnav;
 }
 
-.leftnav-tube
-{
-    margin: 15px;
+.leftnav-tube {
+    top: 0;
+    margin-left: 15px;
+    position: sticky;
+    height: 100vh;
+    max-width: 250px;
+    overflow: auto;
+    border-right: 1px solid #ccc;
 }
 
 #content {
-  margin-left: 340px; /* set left value to WidthOfFrameDiv */
-  max-width: 52em;
-  overflow-x: hidden;
-}
-
-.frontpage 
-{
-  padding-top: 50px; /* Magins for inner DIV inside each DIV (to provide padding) */
-}
-
-.innertube 
-{
-    margin-left: 15px; /* Magins for inner DIV inside each DIV (to provide padding) */
-    margin-right: 11em;
+    grid-area: content;
+    max-width: 52em;
+    margin-left: 30px;
+}
+
+@media screen and (max-width: 1200px) {
+    #content {
+        margin-left: 0px;
+    }
+}
+
+@media screen and (max-width: 992px) {
+    #content {
+        max-width: 35em;
+    }
+}
+
+.topbar {
+    grid-area: topbar;
+    display: none;
+}
+
+@media screen and (max-width: 768px) {
+
+    #container {
+        grid-template-columns: 100%;
+        grid-template-areas:
+            "topbar"
+            "leftnav"
+            "content";
+    }
+
+    /* styling for the top bar */
+    .topbar {
+        display: flex;
+        position: relative;
+        top: 0px;
+        padding: 0.5em;
+        width: 100%;
+        box-sizing: border-box;
+        border-bottom: 1px solid #ccc;
+        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05),
+                    inset 0 -1px 0 rgba(0,0,0,0.15);
+        text-align: center;
+    }
+    .topbar button {
+        padding: 1 6 1 6;
+        margin: 0;
+        height: auto;
+        display: inline-block;
+        border-radius: .25rem;
+        border: 1px solid transparent;
+        background: transparent;
+    }
+    .topbar-expand:not(.show) > button {
+        /* When we add the "show" class we rotate the button 180deg */
+        transform: rotate(180deg);
+    }
+    .topbar-expand > button {
+        transition: transform 0.35s ease;
+    }
+    .topbar-expand.show-permanent > button {
+        display: none;
+    }
+    .topbar-title {
+        text-align: center;
+        flex-grow: 2;
+    }
+    .topbar-title > h1 {
+        font-size: 1.17em;
+        margin: 0px;
+    }
+
+    /* Break words on mobile */
+    #content {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        margin-left: 0px;
+        max-width: 100%;
+    }
+    p {
+        max-width: 100%;
+    }
+    /* The h1 is part of the topbar on mobile */
+    #content h1 {
+        display: none;
+    }
+
+    /* Styling of the navbar when shown/hidden */
+    #leftnav {
+        overflow: hidden;
+    }
+    #leftnav:not(.show) {
+        max-height: 0px;
+        border-bottom: 0px;
+        transition: max-height 0.35s ease;
+    }
+    #leftnav.show {
+        max-height: 60vh;
+        border-bottom: 1px solid #ccc;
+        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05),
+                    inset 0 -1px 0 rgba(0,0,0,0.15);
+        transition: max-height 0.35s ease;
+    }
+    
+    .leftnav-tube {
+        max-height: 60vh;
+        max-width: 100%;
+        position: unset;
+        border-right: 0px;
+        margin-right: 0px;
+        margin-left: 0px;
+        padding: 0px 15px 0px 15px;
+    }
+    #leftnav.show-permanent {
+        max-height: none;
+    }
+    .show-permanent > .leftnav-tube {
+        overflow: initial;
+        max-height: none;
+        height: inherit;
+    }
+    .hide-mobile {
+        opacity: 0;
+    }
+
+}
+
+@media (prefers-reduced-motion: reduce){
+    #leftnav.collapsing{
+        transition: none;
+    }
+    .topbar-expand > button {
+        transition: none;
+    }
+}
+
+.frontpage {
+    padding-top: 50px; /* Magins for inner DIV inside each DIV (to provide padding) */
+}
+
+.mobile-only {
+    display: none;
+}
+
+@media screen and (max-width: 768px) {
+    .mobile-only {
+        display: revert;
+    }
+}
+
+.innertube, .exports-tube {
+    margin-left: 15px;
+    margin-right: 15px;
+}
+
+@media screen and (max-width: 1200px) {
+    .innertube, .exports-tube {
+        margin-left: 0px;
+        margin-right: 15px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .innertube, .exports-tube {
+        margin-left: 15px;
+        margin-right: 15px;
+    }
+}
+
+.footer {
+    margin: 15px; /* Magins for inner DIV inside each DIV (to provide padding) */
+    text-align: center;
 }
 
-.footer 
-{
-  margin: 15px; /* Magins for inner DIV inside each DIV (to provide padding) */
-  text-align: center;
-}
-
-.cref-head h4, .func-head h4, .data-type-name h4 {
-    margin: 0;
-}
 .bold_code   { font-family: mono, Courier, monospace; font-weight: bold }
 
 .title-link {
@@ -115,63 +263,80 @@ a:visited      { color: #1b6ec2; text-decoration: none }
     margin-left: auto;
 }
 
+@media screen and (max-width: 768px) {
+    .cref-head, .func-head, .data-type-name {
+        margin-left: 0em;
+        padding-bottom: 0em;
+        padding-top: 0em;
+    }
+    .title-link {
+        flex-direction: column;
+    }
+    .title-anchors {
+        display: none;
+    }
+    .title-since {
+        margin-left: 1em;
+    }
+}
+
 .code        {
- font-family: mono, Courier, monospace;
- font-weight: normal;
- background-color: #f3f3f3;
+    font-family: mono, Courier, monospace;
+    font-weight: normal;
+    background-color: #f3f3f3;
 }
 
 .note, .warning, .do, .dont {
-  border: 1px solid #495057;
-  margin: 1em 0;
+    border: 1px solid #495057;
+    margin: 1em 0;
 }
 .note .label {
-  background-color: #2b8a3e;
-  color: #fefefe;
-  font-weight: bold;
-  padding: 0.5em 1em;
+    background-color: #2b8a3e;
+    color: #fefefe;
+    font-weight: bold;
+    padding: 0.5em 1em;
 }
 .note .content {
-  background: #f8f9fa;
-  line-height: 120%;
-  font-size: 0.9em;
-  padding: 0.5em 1em;
+    background: #f8f9fa;
+    line-height: 120%;
+    font-size: 0.9em;
+    padding: 0.5em 1em;
 }
 .warning .label {
-  background: #c92a2a;
-  color: #fefefe;
-  font-weight: bold;
-  padding: 0.5em 1em;
+    background: #c92a2a;
+    color: #fefefe;
+    font-weight: bold;
+    padding: 0.5em 1em;
 }
 .warning .content {
-  background-color: #f8f9fa;
-  line-height: 120%;
-  font-size: 0.9em;
-  padding: 0.5em 1em;
+    background-color: #f8f9fa;
+    line-height: 120%;
+    font-size: 0.9em;
+    padding: 0.5em 1em;
 }
 .do .label {
-  background-color: #2b8a3e;
-  color: #fefefe;
-  font-weight: bold;
-  padding: 0.5em 1em;
+    background-color: #2b8a3e;
+    color: #fefefe;
+    font-weight: bold;
+    padding: 0.5em 1em;
 }
 .do .content {
-  background: #f8f9fa;
-  line-height: 120%;
-  font-size: 0.9em;
-  padding: 0.5em 1em;
+    background: #f8f9fa;
+    line-height: 120%;
+    font-size: 0.9em;
+    padding: 0.5em 1em;
 }
 .dont .label {
-  background: #c92a2a;
-  color: #fefefe;
-  font-weight: bold;
-  padding: 0.5em 1em;
+    background: #c92a2a;
+    color: #fefefe;
+    font-weight: bold;
+    padding: 0.5em 1em;
 }
 .dont .content {
-  background-color: #f8f9fa;
-  line-height: 120%;
-  font-size: 0.9em;
-  padding: 0.5em 1em;
+    background-color: #f8f9fa;
+    line-height: 120%;
+    font-size: 0.9em;
+    padding: 0.5em 1em;
 }
 
 .quote {
@@ -179,61 +344,70 @@ a:visited      { color: #1b6ec2; text-decoration: none }
 }
 
 .example {
-  background-color:#f1f3f5;
-  border: 1px solid #dee2e6;
-  padding: 0.5em 1em;
-  margin: 1em 0;
-  font-size: 0.7em;
+    background-color:#f1f3f5;
+    border: 1px solid #dee2e6;
+    padding: 0.5em 1em;
+    margin: 1em 0;
+    font-size: 0.7em;
+    overflow-x: auto;
+    max-width: min(100%, 48em);
 }
 .extrafrontpageinfo {
-  color: #C00;
-  font-weight: bold;
-  font-size: 1.2em;
+    color: #C00;
+    font-weight: bold;
+    font-size: 1.2em;
 }
 
 pre {
- font-family: mono, Courier, monospace;
- font-weight: normal;
- margin: 0;
+    font-family: mono, Courier, monospace;
+    font-weight: normal;
+    margin: 0;
 }
 
 
-.data-types-body, .REFBODY{
- margin-left: 2em;
+.data-types-body, .REFBODY {
+    margin-left: 2em;
 }
 .REFTYPES    { margin-left: 1.5em }
 .exports-body {
     margin-left: 3em;
 }
-.exports-tube
-{
-    margin-right: 11em;
+
+@media screen and (max-width: 768px) {
+    .data-types-body, .REFBODY{
+        margin-left: 1em;
+    }
+    .REFTYPES    { margin-left: 0.75em }
+    .exports-body {
+        margin-left: 1em;
+    }
 }
 
 footer       { }
 
 .erlang-logo-wrapper{
- text-align: center;
- margin-bottom: 1em;
+    text-align: center;
+    margin-top: 1em;
+    margin-bottom: 1em;
 }
 
 .main-title{
- text-align: center;
+    text-align: center;
 }
 
 .main-description{
- text-align: center;
- margin: 2em 0;
- font-size: 1.5em;
- line-height: 1.5em;
+    text-align: center;
+    margin: 2em 0;
+    font-size: 1.5em;
+    line-height: 1.5em;
 }
 
 .doc-table-wrapper, .doc-image-wrapper{
- width: 100%;
+    width: 100%;
 }
 
 .doc-image-wrapper{
- text-align: center;
+    text-align: center;
 }
 
 .doc-svg {
@@ -241,60 +415,60 @@ footer       { }
 }
 
 .doc-table, .doc-image{
- min-width: 50%;
- margin: 0 auto;
- font-size: 0.7em;
+    min-width: 50%;
+    margin: 0 auto;
+    font-size: 0.7em;
 }
 
 .doc-table-caption, .doc-image-caption{
- margin-top: 1em;
- font-style: italic;
- text-align: center;
+    margin-top: 1em;
+    font-style: italic;
+    text-align: center;
 }
 
 table {
- border-collapse: collapse;
- min-width: 50%;
- margin: 1em;
+    border-collapse: collapse;
+    min-width: 50%;
+    margin: 1em;
 }
 
 table, th, td {
- border: 1px solid #666;
+    border: 1px solid #666;
 }
 
 th, td {
- padding: 0.5em;
- text-align: left;
+    padding: 0.5em;
+    text-align: left;
 }
 
 tr:hover {
- background-color: #f5f5f5;
+    background-color: #f5f5f5;
 }
 
 tr:nth-child(even) {
- background-color: #f2f2f2;
+    background-color: #f2f2f2;
 }
 
 th {
- background-color: #777;
- color: #fefefe;
+    background-color: #777;
+    color: #fefefe;
 }
 
 .section-title, .section-subtitle, .section-version{
- text-align: center;
- margin: 0;
+    text-align: center;
+    margin: 0;
 }
 
 .section-title{
- font-weight: bold;
+    font-weight: bold;
 }
 
 .section-version{
- font-size: small;
+    font-size: small;
 }
 
 .expand-collapse-items{
- font-size: small;
+    font-size: small;
 }
 
 .title_link {
@@ -343,24 +517,24 @@ th {
 }
 
 hr{
-  border: 0;
-  border-top: 1px solid #aaa;
+    border: 0;
+    border-top: 1px solid #aaa;
 }
 
 .section-links, .panel-sections, .expand-collapse-items{
- padding: 0 1em;
+    padding: 0 1em;
 }
 
 .section-links, .panel-sections{
- margin-top: 0;
+    margin-top: 0;
 }
 
 a > .code {
- color: #1862ab;
+    color: #1862ab;
 }
 
 .func-types-title{
- font-size: 1em;
+    font-size: 1em;
 }
 
 .since{
diff --git a/lib/erl_docgen/priv/js/flipmenu/Makefile b/lib/erl_docgen/priv/js/flipmenu/Makefile
index be0bed74fb..33cce4e6d6 100644
--- a/lib/erl_docgen/priv/js/flipmenu/Makefile
+++ b/lib/erl_docgen/priv/js/flipmenu/Makefile
@@ -76,7 +76,7 @@ release_spec: opt
 release_html_spec: html
 	$(INSTALL_DIR) "$(RELEASE_PATH)/doc/js/flipmenu"
 	$(INSTALL_DATA) $(JS_FILES) $(GIF_FILES) "$(RELEASE_PATH)/doc/js/flipmenu"
-	$(INSTALL_DATA) ../highlight.js ../highlight.pack.js "$(RELEASE_PATH)/doc/js/"
+	$(INSTALL_DATA) ../highlight.js ../highlight.pack.js ../topbar.js "$(RELEASE_PATH)/doc/js/"
 
 release_docs_spec: $(DOC_TARGETS:%=release_%_spec)
 
diff --git a/lib/erl_docgen/priv/js/topbar.js b/lib/erl_docgen/priv/js/topbar.js
new file mode 100644
index 0000000000..ef36f09c8c
--- /dev/null
+++ b/lib/erl_docgen/priv/js/topbar.js
@@ -0,0 +1,16 @@
+
+function toggleDisplay() {
+    var leftnav=document.getElementById('leftnav');
+    var topbar=document.getElementsByClassName('topbar-expand')[0];
+    if (leftnav.classList.contains('show')) {
+        leftnav.classList.remove('show');
+        topbar.classList.remove('show');
+        setTimeout(() => {
+            leftnav.classList.add('hide-mobile');
+        }, 350);
+    } else {
+        leftnav.classList.add('show');
+        topbar.classList.add('show');
+        leftnav.classList.remove('hide-mobile');
+    }
+}
diff --git a/lib/erl_docgen/priv/xsl/db_html.xsl b/lib/erl_docgen/priv/xsl/db_html.xsl
index acde262899..1fedb53fea 100644
--- a/lib/erl_docgen/priv/xsl/db_html.xsl
+++ b/lib/erl_docgen/priv/xsl/db_html.xsl
@@ -766,6 +766,8 @@
     <xsl:param name="curModule"/>
     <html>
       <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
+        <meta charset="utf-8"></meta>
         <xsl:choose>
           <xsl:when test="string-length($stylesheet) > 0">
             <link rel="stylesheet" href="{$topdocdir}/{$stylesheet}" type="text/css"/>
@@ -784,32 +786,16 @@
         </xsl:choose>
       </head>
       <body>
-
         <div id="container">
           <script id="js" type="text/javascript" language="JavaScript" src="{$topdocdir}/js/flipmenu/flipmenu.js"/>
           <script id="js2" type="text/javascript" src="{$topdocdir}/js/erlresolvelinks.js"></script>
+          <script id="js3" type="text/javascript" src="{$topdocdir}/js/topbar.js"></script>
           <script language="JavaScript" type="text/javascript">
             <xsl:text disable-output-escaping="yes"><![CDATA[
             <!--
-              function getWinHeight() {
-                var myHeight = 0;
-                if( typeof( window.innerHeight ) == 'number' ) {
-                  //Non-IE
-                  myHeight = window.innerHeight;
-                } else if( document.documentElement && ( document.documentElement.clientWidth ||
-                                                         document.documentElement.clientHeight ) ) {
-                  //IE 6+ in 'standards compliant mode'
-                  myHeight = document.documentElement.clientHeight;
-                } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
-                  //IE 4 compatible
-                  myHeight = document.body.clientHeight;
-                }
-                return myHeight;
-              }
-
               function setscrollpos() {
                 var objf=document.getElementById('loadscrollpos');
-                 document.getElementById("leftnav").scrollTop = objf.offsetTop - getWinHeight()/2;
+                document.getElementById("leftnav").firstChild.scrollTop = objf.offsetTop - 10;
               }
 
               function addEvent(obj, evType, fn){
@@ -826,8 +812,41 @@
 
              addEvent(window, 'load', setscrollpos);
 
-             //-->]]></xsl:text>
+             //-->
+]]></xsl:text>
           </script>
+          <div class="topbar">
+            <xsl:variable name="show">
+              <xsl:if test="(local-name() = 'application') or (local-name() = 'part') or (local-name() = 'releasenotes')">
+                <!-- For index pages we want to always show the navbar for mobile -->
+                <xsl:text>show show-permanent</xsl:text>
+              </xsl:if>
+            </xsl:variable>
+            <div class="topbar-expand {$show}">
+              <button onclick="toggleDisplay();">
+                <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 54 54" width="24" height="24">
+                  <g>
+	            <path style="fill:#000000;" d="M27,54c-0.552,0-1-0.448-1-1V8c0-0.552,0.448-1,1-1s1,0.448,1,1v45C28,53.552,27.552,54,27,54z"/>
+	            <path style="fill:#000000;" d="M11,25c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l16-16
+		                                   c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-16,16C11.512,24.902,11.256,25,11,25z"/>
+	            <path style="fill:#000000;" d="M43,25c-0.256,0-0.512-0.098-0.707-0.293l-16-16c-0.391-0.391-0.391-1.023,0-1.414
+		                                   s1.023-0.391,1.414,0l16,16c0.391,0.391,0.391,1.023,0,1.414C43.512,24.902,43.256,25,43,25z"/>
+	            <path style="fill:#000000;" d="M43,2H11c-0.552,0-1-0.448-1-1s0.448-1,1-1h32c0.552,0,1,0.448,1,1S43.552,2,43,2z"/>
+                  </g>
+                </svg>
+              </button>
+            </div>
+            <div class="topbar-title">
+              <h1 id="{header/title}">
+                <xsl:if test="string-length($chapnum) > 0">
+                  <xsl:value-of select="$chapnum"/>&#160;
+                </xsl:if>
+                <xsl:value-of select="header/title"/>
+              </h1>
+            </div>
+            <div class="search-expand {$show}">
+            </div>
+          </div>
           <!-- Generate menu -->
           <xsl:call-template name="menu">
             <xsl:with-param name="chapnum" select="$chapnum"/>
@@ -905,10 +924,22 @@
   <xsl:template name="menu">
     <xsl:param name="chapnum"/>
     <xsl:param name="curModule"/>
+    <xsl:variable name="show">
+      <xsl:choose>
+        <xsl:when test="(local-name() = 'application') or (local-name() = 'part') or (local-name() = 'releasenotes')">
+          <!-- For index pages we want to always show the navbar for mobile -->
+          <xsl:text>show show-permanent</xsl:text>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:text>hide-mobile</xsl:text>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:variable>
     <xsl:if test="(local-name() = 'part') or ((local-name() = 'chapter') and ancestor::part)">
       <!-- .../part or .../part/chapter  -->
       <xsl:call-template name="menu.ug">
         <xsl:with-param name="chapnum" select="$chapnum"/>
+        <xsl:with-param name="show" select="$show"/>
       </xsl:call-template>
     </xsl:if>
 
@@ -922,12 +953,14 @@
 	<!-- .../internal or .../internal/chapter  -->
 	<xsl:call-template name="menu.internal.ug">
           <xsl:with-param name="chapnum" select="$chapnum"/>
+          <xsl:with-param name="show" select="$show"/>
 	</xsl:call-template>
       </xsl:when>
       <xsl:when test="(local-name() = 'internal' and descendant::erlref) or (((local-name() = 'erlref') or (local-name() = 'comref') or (local-name() = 'cref') or (local-name() = 'fileref') or (local-name() = 'appref')) and ancestor::internal)">
 	<!-- .../internal,.../internal/erlref, .../internal/comref or .../internal/cref  or .../internal/fileref or .../internal/appref -->
 	<xsl:call-template name="menu.internal.ref">
           <xsl:with-param name="curModule" select="$curModule"/>
+          <xsl:with-param name="show" select="$show"/>
 	</xsl:call-template>
       </xsl:when>
     </xsl:choose>
@@ -935,12 +968,14 @@
       <!-- .../application,.../application/erlref, .../application/comref or .../application/cref  or .../application/fileref or .../application/appref -->
       <xsl:call-template name="menu.ref">
         <xsl:with-param name="curModule" select="$curModule"/>
+        <xsl:with-param name="show" select="$show"/>
       </xsl:call-template>
     </xsl:if>
     <xsl:if test="(local-name() = 'releasenotes') or ((local-name() = 'chapter') and ancestor::releasenotes)">
       <!-- releasenotes  -->
       <xsl:call-template name="menu.rn">
         <xsl:with-param name="chapnum" select="$chapnum"/>
+        <xsl:with-param name="show" select="$show"/>
       </xsl:call-template>
     </xsl:if>
   </xsl:template>
@@ -1435,8 +1470,9 @@
   <!-- Menu.internal.chapter -->
   <xsl:template name="menu.internal.ug">
     <xsl:param name="chapnum"/>
+    <xsl:param name="show"/>
 
-    <aside id="leftnav">
+    <aside class="{$show}" id="leftnav">
       <nav class="leftnav-tube">
 
         <xsl:call-template name="erlang_logo"/>
@@ -1464,7 +1500,9 @@
     <!-- Menu.internal.ref -->
   <xsl:template name="menu.internal.ref">
       <xsl:param name="curModule"/>
-      <aside id="leftnav">
+      <xsl:param name="show"/>
+      
+      <aside class="{$show}" id="leftnav">
       <nav class="leftnav-tube">
 
         <xsl:call-template name="erlang_logo"/>
@@ -1492,7 +1530,8 @@
 
   <!-- Menu.internal.chapter combined when we have both modules and free-form chapters -->
   <xsl:template name="menu.internal.ug_ref">
-    <aside id="leftnav">
+    <xsl:param name="show"/>
+    <aside class="{$show}" id="leftnav">
       <nav class="leftnav-tube">
 
         <xsl:call-template name="erlang_logo"/>
@@ -1563,8 +1602,9 @@
   <!-- Menu.ug -->
   <xsl:template name="menu.ug">
     <xsl:param name="chapnum"/>
+    <xsl:param name="show"/>
 
-    <aside id="leftnav">
+    <aside class="{$show}" id="leftnav">
       <nav class="leftnav-tube">
 
         <xsl:call-template name="erlang_logo"/>
@@ -1725,7 +1765,9 @@
   <!-- Menu.ref -->
   <xsl:template name="menu.ref">
     <xsl:param name="curModule"/>
-    <aside id="leftnav">
+    <xsl:param name="show"/>
+
+    <aside class="{$show}" id="leftnav">
       <nav class="leftnav-tube">
 
         <xsl:call-template name="erlang_logo"/>
@@ -2772,8 +2814,9 @@
   <!-- Menu.rn -->
   <xsl:template name="menu.rn">
     <xsl:param name="chapnum"/>
+    <xsl:param name="show"/>
 
-    <aside id="leftnav">
+    <aside class="{$show}" id="leftnav">
       <nav class="leftnav-tube">
 
         <xsl:call-template name="erlang_logo"/>
diff --git a/make/otp_release_targets.mk b/make/otp_release_targets.mk
index c594f5c07f..f525368d7a 100644
--- a/make/otp_release_targets.mk
+++ b/make/otp_release_targets.mk
@@ -195,6 +195,7 @@ local_copy_of_topdefs: $(HTMLDIR)/otp_doc.css
 	$(INSTALL) $(DOCGEN)/priv/images/erlang-logo.png $(HTMLDIR)
 	$(INSTALL) $(DOCGEN)/priv/images/erlang-logo.gif $(HTMLDIR)
 	$(INSTALL_DIR) $(HTMLDIR)/js/flipmenu
+	$(INSTALL) $(DOCGEN)/priv/js/*.js $(HTMLDIR)/js
 	$(INSTALL) $(DOCGEN)/priv/js/flipmenu/flip_closed.gif \
 	 	$(DOCGEN)/priv/js/flipmenu/flip_open.gif \
 		$(DOCGEN)/priv/js/flipmenu/flip_static.gif \
diff --git a/system/doc/top/templates/index.html.src b/system/doc/top/templates/index.html.src
index 49d7facda5..0c899efe0c 100644
--- a/system/doc/top/templates/index.html.src
+++ b/system/doc/top/templates/index.html.src
@@ -20,17 +20,43 @@ limitations under the License.
 -->
 
 <html>
-<head>
+  <head>
+  <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
+  <meta charset="utf-8"></meta>
   <link rel="stylesheet" href="otp_doc.css" type="text/css"/>
   <title>Erlang/OTP #otp_base_vsn#</title>
 
 <script id="js" type="text/javascript" language="JavaScript" src="js/flipmenu/flipmenu.js">
-
+</script>
+<script id="js2" type="text/javascript" language="JavaScript" src="js/topbar.js">
 </script>
 </head> 
 
 <body>
   <div id="container">
+      <div class="topbar">
+    <div class="topbar-expand">
+      <button onclick="toggleDisplay();">
+        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 54 54" width="24" height="24">
+<g>
+	<path style="fill:#000000;" d="M27,54c-0.552,0-1-0.448-1-1V8c0-0.552,0.448-1,1-1s1,0.448,1,1v45C28,53.552,27.552,54,27,54z"/>
+	<path style="fill:#000000;" d="M11,25c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l16-16
+		c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-16,16C11.512,24.902,11.256,25,11,25z"/>
+	<path style="fill:#000000;" d="M43,25c-0.256,0-0.512-0.098-0.707-0.293l-16-16c-0.391-0.391-0.391-1.023,0-1.414
+		s1.023-0.391,1.414,0l16,16c0.391,0.391,0.391,1.023,0,1.414C43.512,24.902,43.256,25,43,25z"/>
+	<path style="fill:#000000;" d="M43,2H11c-0.552,0-1-0.448-1-1s0.448-1,1-1h32c0.552,0,1,0.448,1,1S43.552,2,43,2z"/>
+</g>
+        </svg>
+      </button>
+    </div>
+    <div class="topbar-title">
+      <h1>
+        Erlang/OTP #otp_base_vsn#
+      </h1>
+    </div>
+    <div class="search-expand">
+    </div>
+  </div>
 <aside id="leftnav">
 <nav class="leftnav-tube">
 <div class="erlang-logo-wrapper">
@@ -91,7 +117,18 @@ limitations under the License.
     <h2>Some hints that may get you started faster</h2>
 
 <ul>
-
+  <li class="mobile-only">
+    The navigation menu can be accessed by clicking the <svg style="transform: rotate(180deg);" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 54 54" width="24" height="24">
+<g>
+	<path style="fill:#000000;" d="M27,54c-0.552,0-1-0.448-1-1V8c0-0.552,0.448-1,1-1s1,0.448,1,1v45C28,53.552,27.552,54,27,54z"/>
+	<path style="fill:#000000;" d="M11,25c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l16-16
+		c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-16,16C11.512,24.902,11.256,25,11,25z"/>
+	<path style="fill:#000000;" d="M43,25c-0.256,0-0.512-0.098-0.707-0.293l-16-16c-0.391-0.391-0.391-1.023,0-1.414
+		s1.023-0.391,1.414,0l16,16c0.391,0.391,0.391,1.023,0,1.414C43.512,24.902,43.256,25,43,25z"/>
+	<path style="fill:#000000;" d="M43,2H11c-0.552,0-1-0.448-1-1s0.448-1,1-1h32c0.552,0,1,0.448,1,1S43.552,2,43,2z"/>
+</g>
+        </svg> symbol in the top left corner.
+  </li>
 <li>
 The Erlang language is described in the 
 <a href="reference_manual/users_guide.html">Erlang Reference Manual</a>.