Closes #37

sass/partials/_glossary.scss

@@ -1,7 +1,8 @@
 .glossary {
+  &:not(.sidebar-closed) {
     main {
-    margin-left: 200px;
+      margin-left: 250px;
-    width: calc(100vw - 200px);
+      width: calc(100vw - 250px);
     }
 
     .page__header-wrap,
@@ -11,12 +12,27 @@
         max-width: initial;
       }
     }
+
+    .component--glossary-toc-toggle {
+      left: calc(250px - 25px);
+    }
+  }
+
+  &.sidebar-closed {
+    .component--glossary-toc {
+      left: -250px;
+    }
+
+    .component--glossary-toc-toggle {
+      left: 0;
+    }
+  }
 }
 
 
 
 .component--glossary-toc {
-  width: 200px; height: calc(100vh - 4rem);
+  width: 250px; height: calc(100vh - 4rem);
   top: 4rem; left: 0;
 
   background-color: $white;
@@ -32,3 +48,15 @@
     margin-bottom: 1rem;
   }
 }
+
+.component--glossary-toc-toggle {
+  width: 25px; height: 104px;
+
+  font-size: 0.7rem;
+  position: absolute;
+  text-orientation: upright;
+  text-transform: uppercase;
+  top: 4rem;
+  writing-mode: vertical-rl;
+  z-index: 1;
+}

views/partials/glossary-scripts.js

@@ -1,5 +1,9 @@
-/* global document */ "use strict";
+/* global $, document */ "use strict";
 
 
 
 document.getElementsByTagName("body")[0].classList.add("glossary");
+
+$("[data-action='toggle glossary sidebar']").on("click", () => { // Toggle sidebar
+  $("body").toggleClass("sidebar-closed");
+});

views/partials/glossary-toc.js

@@ -21,6 +21,7 @@ module.exports = exports = (state, emit, markdown) => {
     <ul class="component--glossary-toc">
       ${collectionOfTocElements.join("")}
     </ul>
+    <button class="component--glossary-toc-toggle" data-action="toggle glossary sidebar" type="button">Toggle</button>
   `;
 };