Closes #261

app/dist/scripts/api.js

@@ -32,6 +32,22 @@ document.querySelector(".api-toc__search-clear").addEventListener("click", () =>
   reinitJets();
 });
 
+// Handle menu toggle for mobile
+if (document.getElementById("toggle-menu")) {
+  document.getElementById("toggle-menu").addEventListener("click", () => {
+    document.querySelector("body").classList.toggle("disable-scrolling");
+    document.querySelector(".api-toc").classList.toggle("active");
+  });
+
+  // Handle menu toggle when clicking on commands
+  document.querySelectorAll(".api-toc__command a").forEach(command => {
+    command.addEventListener("click", () => {
+      document.querySelector("body").classList.remove("disable-scrolling");
+      document.querySelector(".api-toc").classList.remove("active");
+    });
+  });
+}
+
 
 
 // Code toggles

app/dist/scripts/app.js

@@ -1,4 +1,4 @@
-"use strict"; /* global document, history, location, navigator, send, window */
+"use strict"; /* global document, history, location, send, window */
 
 
 
@@ -16,11 +16,26 @@ document.addEventListener("DOMContentLoaded", () => {
 
 
 
-// Browsers not Firefox do not yet support `text-orientation` and/or `writing-mode`
+// Menu toggle for Glossary
 if (
-  !/Firefox[/\s](\d+\.\d+)/.test(navigator.userAgent) &&
+  window.innerWidth <= 800 &&
-  document.querySelector(".component--glossary-toc-toggle")
+  window.location.pathname.split("/").pop() === "glossary"
-) document.querySelector(".component--glossary-toc-toggle").classList.add("noncompliant-fix");
+) {
+  document.querySelector(".page__header__title").insertAdjacentHTML("afterbegin", "<button id='toggle-menu'>Menu</button>");
+
+  document.getElementById("toggle-menu").addEventListener("click", () => {
+    document.querySelector(".component--glossary-toc").classList.toggle("active");
+    document.querySelector("body").classList.toggle("disable-scrolling");
+  });
+
+  // Handle menu toggle when clicking on commands
+  document.querySelectorAll(".component--glossary-toc a").forEach(keyword => {
+    keyword.addEventListener("click", () => {
+      document.querySelector("body").classList.remove("disable-scrolling");
+      document.querySelector(".component--glossary-toc").classList.remove("active");
+    });
+  });
+}
 
 
 
@@ -37,7 +52,7 @@ document.querySelectorAll("a[href^='#']").forEach(anchor => {
     let elementOffset;
 
     if (document.getElementById(element)) {
-      elementOffset = document.getElementById(element).offsetTop - 74;
+      elementOffset = document.getElementById(element).offsetTop - 150;
       window.scroll({ top: elementOffset, behavior: "smooth" });
       history.pushState({}, "", `#${element}`); // Add hash to URL bar
     }
@@ -81,7 +96,7 @@ function scrollToElementOnLoad() {
       let elementOffset;
 
       if (document.getElementById(element)) {
-        elementOffset = document.getElementById(element).offsetTop - 74;
+        elementOffset = document.getElementById(element).offsetTop - 150;
         window.scroll({ top: elementOffset, behavior: "smooth" });
       }
     }, 150);

app/sass/_layout.scss

@@ -30,6 +30,14 @@ main {
   padding-top: 4rem;
 }
 
+.disable-scrolling {
+  top: 0; right: 0;
+  bottom: 0; left: 0;
+
+  overflow: hidden;
+  position: fixed;
+}
+
 .inner-wrap {
   max-width: 1200px;
   margin-right: auto;
@@ -85,7 +93,7 @@ sub {
 }
 
 frame-viewer {
-  width: 100%; height: calc(100vh - 4rem); // TODO: Update when new navigation is merged
+  width: 100%; height: calc(100vh - 4rem);
   display: block;
 
   iframe {

app/sass/pages/_api.scss

@@ -24,7 +24,7 @@
 
 .api-toc {
   width: 200px; height: calc(100vh - 4rem); // navigation is 4rem tall
-  bottom: 0; left: 0;
+  bottom: 0;
 
   background-color: $lbry-white;
   border-right: 1px solid $lbry-gray-1;
@@ -33,8 +33,25 @@
   position: fixed;
   z-index: 3;
 
+  @media (min-width: 801px) {
+    left: 0;
+  }
+
   @media (max-width: 800px) {
-    display: none;
+    height: calc(100% - 4rem);
+    top: 4rem;
+    padding-top: 3.5rem;
+    transition: left 0.2s;
+
+    -webkit-overflow-scrolling: touch;
+
+    &:not(.active) {
+      left: -200px;
+    }
+
+    &.active {
+      left: 0;
+    }
   }
 }
 
@@ -259,6 +276,7 @@
   .right {
     width: 70%;
     float: right;
+    word-wrap: break-word;
   }
 
   &::after {
@@ -302,6 +320,12 @@
   font-size: 0.8rem;
   transition: background-color 0.2s;
 
+  &.menu {
+    @media (min-width: 801px) {
+      display: none;
+    }
+  }
+
   &:not(:last-of-type) {
     margin-right: 0.5rem;
   }

app/sass/pages/_page.scss

@@ -13,6 +13,7 @@
 .page__header {
   @include center;
   width: 100%;
+  top: 4rem;
 
   background-color: $lbry-black;
   background-position: center;
@@ -21,7 +22,11 @@
   color: $lbry-white;
   padding-right: env(safe-area-inset-right);
   padding-left: env(safe-area-inset-left);
-  position: relative;
+  position: sticky;
+  z-index: 2;
+
+  // GOOD OL' SAFARI
+  position: -webkit-sticky; // sass-lint:disable-line no-duplicate-properties
 }
 
 .page__header__title {
@@ -39,6 +44,29 @@
     padding-top: 1rem;
     padding-bottom: 1rem;
   }
+
+  @media (min-width: 801px) {
+    button {
+      display: none;
+    }
+  }
+
+  @media (max-width: 800px) {
+    button {
+      margin-right: 1rem; padding-right: 1rem;
+      position: relative;
+
+      &::after {
+        width: 1px; height: 100%;
+        top: 0; right: 0;
+
+        background-color: $lbry-white;
+        content: "";
+        opacity: 0.3;
+        position: absolute;
+      }
+    }
+  }
 }
 
 .page__content {

app/sass/partials/_glossary.scss

@@ -20,7 +20,7 @@
 
 .component--glossary-toc {
   width: 200px; height: calc(100vh - 4rem);
-  bottom: 0; left: 0;
+  bottom: 0;
 
   background-color: $lbry-white;
   border-right: 1px solid $lbry-gray-1;
@@ -28,15 +28,37 @@
   line-height: 1.33;
   overflow-x: hidden;
   overflow-y: auto;
-  padding-top: 0.25rem !important;
   padding-left: 0 !important;
   position: fixed;
   z-index: 1;
 
-  @media (max-width: 800px) {
+  @media (min-width: 801px) {
-    display: none;
+    left: 0;
+    padding-top: 0.25rem !important;
   }
 
+  @media (max-width: 800px) {
+    height: 100%;
+    top: 0;
+    padding-top: 9rem !important;
+    // padding-bottom: 4rem;
+    transition: left 0.2s;
+
+    -webkit-overflow-scrolling: touch;
+
+    &:not(.active) {
+      left: -200px;
+    }
+
+    &.active {
+      left: 0;
+    }
+  }
+
+  // @media (max-width: 800px) {
+  //   display: none;
+  // }
+
   li {
     list-style-type: none !important;
 

app/views/api.js

@@ -309,6 +309,7 @@ function renderReturns(args) {
 
 function renderToggles(onSdkPage) {
   return [
+    "<button class='api-content__item menu' id='toggle-menu'>menu</button>",
     !onSdkPage ? "<button class='api-content__item' id='toggle-cli' type='button'>cli</button>" : "",
     "<button class='api-content__item' id='toggle-curl' type='button'>curl</button>",
     onSdkPage ? "<button class='api-content__item' id='toggle-lbrynet' type='button'>lbrynet</button>" : "",

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.4.4",
     "@inc/fastify-ws": "^1.1.0",
-    "@octokit/rest": "^16.25.3",
+    "@octokit/rest": "^16.25.4",
     "@slack/client": "^5.0.1",
     "async": "^2.6.2",
     "async-es": "^2.6.2",
@@ -29,7 +29,7 @@
     "dedent": "^0.7.0",
     "dotenv": "^8.0.0",
     "fastify": "~2.3.0",
-    "fastify-compress": "^0.9.0",
+    "fastify-compress": "^0.10.0",
     "fastify-helmet": "^3.0.0",
     "fastify-static": "^2.4.0",
     "front-matter": "^3.0.2",
@@ -67,7 +67,7 @@
     "@lbry/color": "^1.1.1",
     "@lbry/components": "^2.7.1",
     "eslint": "^5.16.0",
-    "husky": "^2.2.0",
+    "husky": "^2.3.0",
     "nodemon": "^1.19.0",
     "npm-run-all": "^4.1.5",
     "pino-pretty": "^3.0.0",