docs: responsive (#12308)

docs/css/style.css

@@ -21,10 +21,126 @@ div.sequelize {
   max-width: 300px;
   max-width: 300px;
 }
 }
 
 
-.navigation {
-  margin-top: 40px !important;
+.layout-container {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.layout-container .navigation {
+  position: initial;
+  margin: 0;
+  padding: 0 0.25em;
+  flex-grow: 1;
+  flex-shrink: 1;
+  max-width: 18em;
+  height: calc(100% - 4.6em - 40px);
+  overflow: auto;
+}
+
+.layout-container header {
+  position: initial;
+  flex-basis: 100%;
+  display: flex;
+}
+
+.layout-container header .search-box {
+  position: initial;
+  flex-grow: 1;
+  flex-shrink: 1;
+  text-align: right;
+  order: 1;
+  margin-top: 0.75em;
+  padding-bottom: 0;
+}
+
+.search-box>span {
+  display:block;
+  width: 100%;
+}
+
+.search-box.active .search-input {
+  width: calc(100% - 29px);
+  max-width: 300px;
+}
+
+.search-result {
+  right: 0;
+}
+
+.content {
+  position: initial;
+  margin: 0;
+  flex-grow: 1;
+  flex-basis: 50%;
+  height: calc(100% - 4.6em - 40px);
+  overflow: auto;
   padding-top: 0;
   padding-top: 0;
-  height: calc(100% - 40px);
+}
+
+.navigation .hamburger {
+  display: none;
+  background-color: #eee;
+  width: 2.3em;
+  border: none;
+  padding: 0.25em;
+  cursor: pointer;
+  margin: 0.5em 0.25em;
+}
+
+.navigation .hamburger .line {
+  display: block;
+  width: 100%;
+  height: 0.25em;
+  background-color: #666;
+  margin: 0.3em 0;
+  pointer-events: none;
+}
+
+.footer {
+  flex-basis: 100%;
+  margin-top: 1em;
+  padding: 1em 0;
+  height: 1.6em;
+}
+
+code {
+  overflow: auto;
+}
+
+@media only screen and (max-width: 660px) {
+  .layout-container .navigation {
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    position: absolute;
+    background-color: #fff;
+    top: 40px;
+    z-index: 1;
+    box-shadow: 1px 2px 4px #aaa;
+  }
+
+  .layout-container .navigation.open {
+    height: calc(100% - 40px);
+  }
+
+  .layout-container .navigation .hamburger {
+    display: inline-block;
+  }
+
+  .layout-container .navigation>div {
+    display: none;
+  }
+
+  .layout-container .navigation.open>div {
+    display: block;
+  }
+
+  .footer {
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
 }
 
 
 .manual-toc a:hover {
 .manual-toc a:hover {
@@ -43,6 +159,7 @@ div.sequelize {
 }
 }
 
 
 .api-reference-link {
 .api-reference-link {
+  white-space: nowrap;
   font-weight: bold;
   font-weight: bold;
   padding: 0 20px;
   padding: 0 20px;
 }
 }

docs/scripts/.eslintrc

+{
+    "env": {
+        "browser": true
+    }
+}

docs/scripts/menu-groups.js

+'use strict';
+
+(() => {
+  function toggleNavigationBar() {
+    const navigationElements = document.getElementsByClassName('navigation');
+    for (let i = 0; i < navigationElements.length; ++i) {
+      const navigationElement = navigationElements[i];
+      navigationElement.classList.toggle('open');
+    }
+  }
+
+  // Hamburger button - toggles the navigation bar
+  const hamburger = document.getElementById('navigationHamburger');
+  hamburger.addEventListener('click', () => {
+    toggleNavigationBar();
+  });
+
+  // Each link in the navigation bar - closes the navigation bar
+  const navigationLinks = document.querySelectorAll('.navigation a');
+  for (let i = 0; i < navigationLinks.length; ++i) {
+    const linkElement = navigationLinks[i];
+    linkElement.addEventListener('click', () => {
+      toggleNavigationBar();
+    });
+  }
+})();

docs/transforms/menu-groups.js

 'use strict';
 'use strict';
 
 
+const fs = require('fs');
+const path = require('path');
 const _ = require('lodash');
 const _ = require('lodash');
 const manualGroups = require('./../manual-groups.json');
 const manualGroups = require('./../manual-groups.json');
 
 
@@ -18,6 +20,11 @@ function isLinkToHiddenManual(link) {
 }
 }
 
 
 module.exports = function transform($, filePath) {
 module.exports = function transform($, filePath) {
+  // The three <span>s are used to draw the menu button icon
+  $('nav.navigation').prepend($('<button id="navigationHamburger" class="hamburger" type="button"><span class="line"></span><span class="line"></span><span class="line"></span></button>'));
+  const menuGroupsScripts = fs.readFileSync(path.join(__dirname, '..', 'scripts', 'menu-groups.js'), 'utf8');
+  $('body').append($(`<script>${menuGroupsScripts}</script>`));
+
   const sidebarManualDivs = $('nav div.manual-toc-root div[data-ice=manual]');
   const sidebarManualDivs = $('nav div.manual-toc-root div[data-ice=manual]');
 
 
   $(sidebarManualDivs.get(0)).before(`
   $(sidebarManualDivs.get(0)).before(`

docs/transforms/meta-tags.js

+'use strict';
+
+module.exports = function transform($) {
+  $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0"/>');
+};