Website: Fix docs nav functionality and optimize for mobile

A few minor styling fixes for the docs nav for mobile, refactoring
the markup to remove unneeded parent elements, and fixing a
bug where the nav overlapped with the footer if the window was
too short.

www/source/javascripts/nav.js

@@ -2,6 +2,11 @@
 const $navLinks = $('.main-nav--links');
 const $navToggle = $('.main-nav--toggle');
 const navBreakpoint = 730; // this should match $nav-breakpoint in _nav.scss
+const $mainContent = $('#main-content');
+
+$(document).ready(function() {
+  $mainContent.css('min-height', $('#main-nav').outerHeight() - $('#main-nav-ctas').outerHeight());
+});
 
 $navToggle.click(function() {
   $(this).toggleClass('is-active');
@@ -13,4 +18,20 @@ $(window).resize(function() {
     $navToggle.removeClass('is-active');
     $navLinks.attr("style", "");
   }
-});
+});
+
+// toggles fixed nav position when the window is too short
+const footerOffsetTop = $("#main-footer").offset().top;
+var navOffsetBottom;
+
+function toggleFixedNavPosition() {
+  navOffsetBottom = $("#main-nav").outerHeight() + $(window).scrollTop();
+
+  $("#main-nav").toggleClass("is-fixed-bottom", footerOffsetTop < navOffsetBottom)
+}
+
+toggleFixedNavPosition();
+
+$(window).scroll(function() {
+  toggleFixedNavPosition();
+});

www/source/layouts/_nav.slim

@@ -9,7 +9,8 @@ nav#main-nav class="sidebar-layout-#{locals[:sidebar_layout]}"
       a.button.transparent.try-demo href="#" Try the Demo
       a.button.secondary href="https://downloads.chef.io/inspec" Download
     - if locals[:sidebar_layout] == 'docs'
-      = partial "layouts/sidebar"
+      li.main-nav--sidebar
+        = partial "layouts/sidebar"
     - else
       li.main-nav--link
         a href="/"

www/source/layouts/_sidebar.slim

@@ -1,19 +1,16 @@
-.container__has-sidebar
+- if locals[:sidebar_layout] == 'docs'
-  .row
+  form.main-sidebar--search action="/docs/search/" method="get"
-    .main-sidebar
+    input type="text" placeholder="Search Documentation" name="q"
-        - if locals[:sidebar_layout] == 'docs'
+ul.main-sidebar--links
-          form.main-sidebar--search action="/docs/search/" method="get"
+  - sidebar_data(sidebar_layout).each do |item|
-            input type="text" placeholder="Search Documentation" name="q"
+    li.main-sidebar--link
-        ul.main-sidebar--links
+      h6 = item.title
-          - sidebar_data(sidebar_layout).each do |item|
+      ul.main-sidebar--list.no-bullet
-            li.main-sidebar--link
+        - item.links.each do |item_link|
-              h6 = item.title
+          li.main-sidebar--list--item class=link_classes(current_resource.url, item_link)
-              ul.main-sidebar--list.no-bullet
+            = link_to item_link.title, item_link.link
-                - item.links.each do |item_link|
+            - if print_sub_links?(current_resource.url, item_link)
-                  li.main-sidebar--list--item class=link_classes(current_resource.url, item_link)
+              ul.main-sidebar--list--item--dropdown.no-bullet
-                    = link_to item_link.title, item_link.link
+                - item_link.sub_links.each do |sub_link|
-                    - if print_sub_links?(current_resource.url, item_link)
+                  li.main-sidebar--list--item  class=link_classes(current_resource.url, sub_link)
-                      ul.main-sidebar--list--item--dropdown.no-bullet
+                    = link_to sub_link.title, sub_link.link
-                        - item_link.sub_links.each do |sub_link|
-                          li.main-sidebar--list--item  class=link_classes(current_resource.url, sub_link)
-                            = link_to sub_link.title, sub_link.link

www/source/stylesheets/_layout.scss

@@ -1,4 +1,5 @@
 body {
+  position: relative;
   font-family: $main-font;
   color: $body-text;
 }

www/source/stylesheets/_nav.scss

@@ -28,6 +28,11 @@ $nav-breakpoint: 730px;
     position: fixed;
     z-index: 100;
     width: $side-nav-width;
+
+    &.is-fixed-bottom {
+      bottom: 137px;
+      position: absolute;
+    }
   }
 }
 
@@ -93,6 +98,11 @@ $nav-breakpoint: 730px;
   @include nav-small {
     display: none;
   }
+
+  .sidebar-layout-docs & {
+    max-height: calc(100vh - 64px);
+    overflow-y: scroll;
+  }
 }
 
 .main-nav--link {

www/source/stylesheets/_sidebar.scss

@@ -1,6 +1,26 @@
-.main-sidebar ul {
+.sidebar-layout-docs {
+  .main-nav--links {
+    border-top: none;
+  }
+
+  .main-nav--link-ctas {
+    border-bottom: none;
+    margin-bottom: 3px;
+  }
+}
+
+.main-nav--sidebar {
+  padding: 0 $side-nav-padding-small;
+
+  @include nav-large {
+    padding: 0 $side-nav-padding-large;
+  }
+}
+
+.main-sidebar--links {
   list-style: none;
   margin-left: 0.5rem;
+
   ul {
     margin-left: 0;
     margin-bottom: 1rem;
@@ -9,7 +29,6 @@
 
 .main-sidebar--link h6 {
   font-weight: 500;
-
 }
 
 .main-sidebar--list--item {
@@ -64,9 +83,3 @@
     min-width: 54px;
   }
 }
-
-// FIXME: this is used to remove the top border line of the search
-// see https://github.com/chef/inspec/issues/1114#issuecomment-249525984
-.sidebar-layout-docs > .main-nav--links {
-  border-top: none;
-}