Add toggle toc button

assets/js/main.js

@@ -65,6 +65,12 @@ 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);
 

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;
   }
 

layouts/partials/header.html

@@ -14,6 +14,9 @@
 				{{ with .Params.featuredImg -}}
 				<button class="hdr-btn" onclick="showFeaturedImg()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button>
 				{{- end }}
+				{{- with .Params.toc -}}
+				<button class="hdr-btn desktop-only-ib" onclick="toggleToc()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg></button>
+				{{- end }}
 				{{- with .Site.Params.social -}}
 				<span class="hdr-social hide-in-mobile">{{ partialCached "social-icons.html" . }}</span>
 				{{- end -}}