Add toggle toc button

2 files changed, 26 insertions, 5 deletions

diff --git a/assets/js/main.js b/assets/js/main.js
index ed98d94..9ba2939 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -65,12 +65,18 @@ const showContent = () => {
   document.getElementById('bg-img').classList.remove('show-bg-img');
 }
 
+// Toggle TOC
+//
+const toggleToc = () => {
+  document.getElementById('toc').classList.toggle('show-toc');
+}
+
 if (haveHeader == true) {
   document.getElementById('menu-btn').addEventListener('click', mobileMenuToggle);
-  
+
   window.addEventListener('scroll', throttle(() => {
     autoHideHeader();
-    
+
     if (mobileMenuVisible == true) {
       mobileMenuToggle();
     }
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 7424f4d..6606273 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -145,6 +145,10 @@ table {
   height: 1em;
 }
 
+.desktop-only, .desktop-only-ib {
+  display: none;
+}
+
 // Accessibility
 //
 .screen-reader-text {
@@ -234,6 +238,7 @@ table {
   border: none;
   background: none;
   padding: 0;
+  margin-left: .4em;
   cursor: pointer;
 }
 
@@ -656,6 +661,9 @@ hr.post-end {
   text-align: center;
 }
 
+// Media Queries
+//
+
 @media (min-width: 800px) {
   .site-main {
     margin-top: 3em;
@@ -677,6 +685,15 @@ hr.post-end {
     margin-top: 8em;
   }
 
+  .desktop-only,
+  #toc.show-toc {
+    display: block;
+  }
+
+  .desktop-only-ib {
+    display: inline-block;
+  }
+
   figure.left {
     margin-left: -240px;
     p {
@@ -702,7 +719,6 @@ hr.post-end {
 
   #toc {
     top: 13em;
-    display: block;
     margin-left: 370px;
     max-width: 220px;
   }
@@ -754,8 +770,7 @@ hr.post-end {
     display: none;
   }
 
-  #menu-btn,
-  #search-btn {
+  #menu-btn {
     display: inline-block;
   }