feat: add ToC on the guides section (#914)

* feat: add toc on the guides section

* fix: adjust responsive padding [sc-17693]

* fix: add container to avoid larger content [sc-17693]

* fix: add fixed sidebar [sc-17693]

* fix: scroll on toc [sc-17693]

* fix: remove comment [sc-17693]

---------

Co-authored-by: Stefan Judis <[email protected]>

site/layouts/guides/single.html

@@ -1,17 +1,27 @@
 {{ define "main" }}
-  <div class="main container guides">
-    <div class="row">
-      <div class="col-sm-12 col-lg-10 offset-lg-1">
+  <div class="d-flex container-fluid guides">
+    <div class="guides-page">
+      <div class="col-sm-12 col-lg-11">
       	<div class="guides__label">
       		Checkly Guides
       	</div>
       	<h1 class="guides__title">{{.Title}}</h1>
+        <div class="guides-toc-mobile mb-5 pt-3">
+          <div class="guides-toc-header mb-3 pt-3">On this page</div>
+          {{ .Page.TableOfContents }}
+        </div>
       	{{ if .Description }}
       	<p class="guides__description">{{.Description}}</p>
       	{{ end }}
         <span class="markdown">{{.Content}}</span>
       </div>
+      {{ partial "start-for-free-row" . }}
     </div>
-    {{ partial "start-for-free-row" . }}
+    <aside class="guides-toc mb-3">
+      <div id="tocMenu">
+        <div class="guides-toc-header">On this page</div>
+        {{ .Page.TableOfContents }}
+      </div>
+    </aside>
   </div>
 {{end}}

src/js/docs.js

@@ -5,11 +5,11 @@
 
 $(document).ready(() => {
   const docsMenuTitleClass = '.docs-menu-title'
-  var docsMenuHeader = $(docsMenuTitleClass)
+  const docsMenuHeader = $(docsMenuTitleClass)
 
   docsMenuHeader.click(function () {
-    var id = $(this).attr('id')
-    var docMenuId = '#docs-menu-' + id
+    const id = $(this).attr('id')
+    const docMenuId = '#docs-menu-' + id
     if ($(this).attr('class') === 'docs-menu-title') {
       $(this).addClass('active')
       $(docMenuId).addClass('menu-display')
@@ -82,28 +82,31 @@ $(document).on('keydown', function (e) {
  * Sidemenu fixed position after some scroll-up
  */
 
-var sideMenu = $('#sideMenu')
+const sideMenu = $('#sideMenu')
+const tocMenu = $('#tocMenu')
+let sideMenuDistance
+
 if (sideMenu.length) {
-  var sideMenuDistance = sideMenu.offset().top - 10
+  sideMenuDistance = sideMenu.offset().top - 10
+} else { sideMenuDistance = tocMenu.offset().top - 10 }
 
-  $(window).on('scroll', function () {
-    if ($(window).scrollTop() >= sideMenuDistance) {
-      $('#sideMenu').css({
-        position: 'fixed',
-        top: '0px'
-      })
-      $('#tocMenu').css({
-        position: 'fixed',
-        top: '30px'
-      })
-    } else {
-      $('#sideMenu').css({
-        position: 'relative'
-      })
-      $('#tocMenu').css({
-        position: 'relative',
-        top: '0'
-      })
-    }
-  })
-}
+$(window).on('scroll', function () {
+  if ($(window).scrollTop() >= sideMenuDistance) {
+    $('#sideMenu').css({
+      position: 'fixed',
+      top: '0px'
+    })
+    $('#tocMenu').css({
+      position: 'fixed',
+      top: '30px'
+    })
+  } else {
+    $('#sideMenu').css({
+      position: 'relative'
+    })
+    $('#tocMenu').css({
+      position: 'relative',
+      top: '0'
+    })
+  }
+})

src/js/guides.js

@@ -0,0 +1,19 @@
+/**
+ * Docs TOC Sidebar
+ */
+
+const sideMenuDistance = $('#tocMenu').offset().top - 10
+
+$(window).on('scroll', function () {
+  if ($(window).scrollTop() >= sideMenuDistance) {
+    $('#tocMenu').css({
+      position: 'fixed',
+      top: '30px'
+    })
+  } else {
+    $('#tocMenu').css({
+      position: 'relative',
+      top: '0'
+    })
+  }
+})

src/scss/_guides.scss

@@ -97,7 +97,9 @@
 	}
 }
 .guides {
+	$toc-width: 14rem;
 	margin-top: 50px;
+	max-width: 90rem;
 	&__label {
 	  width: 150px;
 	  height: 30px;
@@ -122,6 +124,15 @@
     line-height: 1.6;
     margin-bottom: 23px;
   }
+	aside nav ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    font-size: 14px;
+  }
+	.mobile-toc-button {
+		display: none;
+	}
 	.markdown {
 	  h2 {
 	    font-size: 32px;
@@ -165,4 +176,135 @@
 	.free-trial-section {
 	  padding-top: 100px;
 	}
+
+	@include media-breakpoint-down(md) {
+		.guides-toc {
+    	 display: none;
+    }
+    .guides-toc-mobile {
+      display: block;
+    }
+		&__title {
+			font-size: 32px;
+		}
+		nav#TableOfContents {
+      ul {
+        border-left: 2px solid $blue;
+        padding-left: .5rem;
+				list-style: none;
+      }
+
+      li > ul {
+        display: none;
+      }
+    }
+		&-page {
+			padding: 0px !important;
+		}
+	}
+	&-toc {
+		position: relative;
+		font-size: .875rem;
+		margin-right: auto;
+		width: 232px;
+		padding-top: 8rem;
+    flex: 0 0 $toc-width;
+
+		nav {
+      width: $toc-width;
+      padding: 1rem 0 1rem 0;
+      bottom: 0;
+      overflow-x: hidden;
+      overflow-y: auto
+    }
+
+    nav#TableOfContents {
+      ul {
+        border-left: 2px solid $blue;
+        padding-left: .5rem;
+
+        ul {
+          padding-left: 0.75rem;
+        }
+
+        li {
+          a {
+            color: $blue;
+            display: block;
+            padding-block: 5px;
+          }
+        }
+      }
+    }  
+
+		nav ul ul {
+      padding-left: 1rem;
+      border-left: none !important;
+    }
+
+		&-header {
+      color: $gray-dark;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+		&-mobile {
+      display: none;
+      .learn-toc-header {
+        top: 0;
+        position: relative;
+        padding-top: 0;
+      }
+    }
+	}
+	&-page {
+    min-width: 20rem;
+    flex-grow: 1;
+    padding: 1rem 0;
+    margin-left: 0;
+    margin-right: 0;
+
+    .markdown {
+      padding-right: 30px;
+
+      .breadcrumb {
+        background: $white;
+        padding: 0;
+
+        a {
+          color: $gray;
+        }
+      }
+
+      .mobile-toc-button {
+        display: none;
+      }
+
+      .search {
+        margin-bottom: 30px;
+      }
+    }
+
+    .form-inline {
+      width: 100%;
+      position: relative;
+
+      span {
+        width: 100%;
+        max-width: 2000px;
+        height: 100%;
+      }
+      img {
+        position: absolute;
+        top: 11px;
+        left: 10px;
+      }
+      input {
+       width: 100%;
+       height: 100%;
+       background: none;
+       border: 1px solid $gray-light;
+       padding-left: 30px;
+      }
+    }
+  }
 }