Docs sidebar re-design

5 files changed, 72 insertions, 96 deletions

diff --git a/content/assets/javascripts/docs.js b/content/assets/javascripts/docs.js
index e19a305f..61d3c1cb 100644
--- a/content/assets/javascripts/docs.js
+++ b/content/assets/javascripts/docs.js
@@ -1,5 +1,5 @@
 ---
-version: 2
+version: 3
 ---
 
 var NAV_INLINE_BREAKPOINT = 1100;
@@ -81,24 +81,5 @@ function toggleNavigation() {
       }
     });
 
-    // Adds the ability to auto-scroll to the active item in the TOC
-    $(window).on('activate.bs.scrollspy', function() {
-      const isMobile = window.matchMedia('(max-width: 1099px)').matches;
-
-      if(isMobile) {
-        return;
-      }
-
-      const activeAnchors = document.querySelectorAll('#markdown-toc .nav-link.active');
-
-      if(activeAnchors.length) {
-        const sidebarAnchorOffset = 45;
-        const lastActiveAnchor = activeAnchors[activeAnchors.length -1];
-        const sidebar = document.getElementById('doc-nav');
-        // Takes the last active anchor in the tree and scrolls it into view.
-        lastActiveAnchor.scrollIntoView();
-        sidebar.scrollTop -= sidebarAnchorOffset;
-      }
-    });
   });
 })();
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index c1679f59..c9fca4b7 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -2,6 +2,12 @@
 $medium-width: 1100px;
 $mobile-width: 900px;
 
+// New Breakpoints
+$xs-width: 576px;
+$sm-width: 768px;
+$md-width: 992px;
+$lg-width: 1400px;
+
 // Border radius
 $border-radius: 4px;
 
@@ -28,9 +34,8 @@ $page-header-height: 40px;
 $banner-height: 31px;
 
 // Width
-$landing-page-content: 955px;
-$sidebar-width: 236px;
-$page-content-width: 955px;
+$sidebar-width: 220px;
+$page-content-width: 980px;
 
 // GitLab colors
 // Tanuki
diff --git a/content/assets/stylesheets/footer.scss b/content/assets/stylesheets/footer.scss
index 5fa62dcb..e4c4e80a 100644
--- a/content/assets/stylesheets/footer.scss
+++ b/content/assets/stylesheets/footer.scss
@@ -1,12 +1,12 @@
 ---
-version: 8
+version: 9
 ---
 
 @import "variables";
 
 .footer {
   border-color: $gds-gray-100;
-  max-width: $landing-page-content;
+  max-width: $page-content-width;
   font-size: $body-font-size;
   a {
     color: $landing-sidebar-gray-500;
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 3c7cdba5..3ba7ce60 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 73
+version: 75
 ---
 
 @import "variables";
@@ -20,6 +20,12 @@ body {
 
   >.wrapper {
     min-height: 100vh;
+    background-color: $gds-gray-50;
+
+    @media(max-width: $md-width) {
+      flex-direction: column-reverse;
+      background-color: $white;
+    }
 
     // adds extra padding to the side-nav and main content if a banner is displayed.
     &.show-banner .nav-wrapper, &.show-banner .main {
@@ -300,19 +306,13 @@ li {
 }
 
 .main {
-  margin: auto;
   padding: $page-header-height 40px 0;
-  position: relative;
-  max-width: 50vw;
+  max-width: $page-content-width;
   border-right: 1px solid $main-box-shadow;
   border-left: 1px solid $main-box-shadow;
   background: $main-background-color;
   z-index: 1;
 
-  @media (max-width: $mobile-width) {
-    padding: 55px 10px 5px;
-  }
-
   &:not(.has-toc) {
     > .doc-nav {
       display: none;
@@ -429,6 +429,13 @@ li {
     }
   }
 
+  @media(max-width: $md-width) {
+    padding: 0 40px 0 80px;
+  }
+
+  @media(max-width: $lg-width) and (min-width: $md-width)  {
+    width: 60%;
+  }
 }
 
 // Override Bootstraps default button (for GDS colors)
@@ -462,19 +469,20 @@ li {
 .nav-wrapper {
   display: flex;
   flex-direction: column;
-  position: fixed;
+  position: sticky;
   padding-top: $page-header-height;
-  max-width: 220px;
+  max-width: $sidebar-width;
   width: 50px;
   height: 100vh;
   transition: all .3s;
   background: $gds-gray-50;
   border-right: 1px solid $gds-gray-200;
   z-index: 2;
+  top: 0;
 
   &.active {
-    width: 15%;
-    min-width: 190px;
+    @include sidebar-fixed;
+    min-width: $sidebar-width;
 
     .nav-toggle {
 
@@ -509,7 +517,6 @@ li {
     height: 50px;
     flex-shrink: 0;
     border-radius: 0;
-    border-top: 1px solid $gds-gray-200;
 
     &:hover {
       background-color: $gds-gray-200;
@@ -555,6 +562,16 @@ li {
       transform: rotate(-45deg) translateY(-4px);
     }
   }
+
+  @media(max-width: $md-width) {
+    position: fixed;
+    top: 0;
+
+    &.active {
+      position: fixed;
+      top: 0;
+    }
+  }
 }
 
 .global-nav {
@@ -565,13 +582,6 @@ li {
   overflow: auto;
   visibility: hidden;
 
-  .global-nav-section {
-    &.expanded {
-      background-color: $gds-gray-100;
-      box-shadow: inset 4px 0 0 $gds-indigo-800;
-    }
-  }
-
   .global-nav-cat.active {
     a {
       color: $gds-indigo-800;
@@ -579,6 +589,7 @@ li {
   }
 
   .global-nav-content {
+    margin-top: 60px;
     margin-bottom: 70px;
   }
 
@@ -590,10 +601,14 @@ li {
     padding-bottom: 7px;
     padding-right: 7px;
 
+    &.has-collapse.active {
+      border-right: 0;
+    }
+
     &.active {
       background-color: $gds-gray-100;
       font-weight: 600;
-      border-left: 4px solid;
+      border-right: 4px solid;
       color: $gds-indigo-800;
 
       &:hover {
@@ -634,6 +649,8 @@ li {
 
     &.active {
       background-color: $gds-gray-200;
+      border-right: 4px solid;
+      color: $gds-indigo-800;
       &.section-title {
         background-color: $gds-gray-100;
       }
@@ -764,6 +781,12 @@ a.global-nav-link {
       padding: 0 4px 0 6px;
     }
   }
+
+  @media(max-width: $md-width) {
+    padding: 10px 80px 0;
+    margin-top: 60px;
+    margin-bottom: -40px;
+  }
 }
 
 // Permalinks on header elements.
@@ -1191,7 +1214,7 @@ a.global-nav-link {
   }
 
   .content {
-    max-width: $landing-page-content;
+    max-width: $page-content-width;
   }
 
   .sidebar-left {
diff --git a/content/assets/stylesheets/toc.scss b/content/assets/stylesheets/toc.scss
index 46f236b5..549e40dc 100644
--- a/content/assets/stylesheets/toc.scss
+++ b/content/assets/stylesheets/toc.scss
@@ -1,8 +1,9 @@
 ---
-version: 12
+version: 14
 ---
 
 @import "variables";
+@import "utilities";
 
 $base-nav-link-padding: .75rem;
 $sm-nav-link-padding: 1.25rem;
@@ -56,17 +57,22 @@ $nav-link-font-size: 14px;
   flex-wrap: nowrap;
 }
 
-// not wide enough to show quick nav and toc
-@media(max-width:1099px) {
+// NOTE: This only allows for 10 levels.
+// This should be acceptable since levels are determined by the `<h1-6>` which is less
+// than 10 anyways...
+@for $i from 0 to 10 {
+  .nav-link.toc-level-#{$i} {
+    padding-left: $base-nav-link-padding * ($i + 1);
+  }
+}
+
+@media(max-width: $md-width) {
   .doc-nav {
-    position: relative;
-    min-height: 34px;
+    padding: 50px 40px 0 70px;
   }
 
   .table-of-contents {
-    margin: 0;
-    padding: 0;
-
+    margin-top: 0;
     .nav-link {
       border-left: 0;
       padding-left: $sm-nav-link-padding;
@@ -87,13 +93,6 @@ $nav-link-font-size: 14px;
     display: none;
   }
 
-  .main.class {
-    float: none;
-    width: inherit;
-    max-width: 955px;
-    margin: auto 1% auto 50px;
-  }
-
   .toc-lg {
     display: none;
   }
@@ -104,19 +103,15 @@ $nav-link-font-size: 14px;
 }
 
 // wide enough to show toc but not quick nav
-@media(min-width:1100px) {
+@media(min-width: $md-width) {
   .header {
     top: 0;
     left: 0;
   }
 
   .doc-nav {
-    position: fixed;
-    top: 0;
-    right: 8px;
+    @include sidebar-fixed;
     margin-top: 55px;
-    overflow: scroll;
-    height: 100%;
 
     &.toc-no-breadcrumbs {
       padding-top: 6px;
@@ -136,32 +131,4 @@ $nav-link-font-size: 14px;
     padding-top: 1rem;
     margin-top: 1rem;
   }
-
-  // NOTE: This only allows for 10 levels.
-  // This should be acceptable since levels are determined by the `<h1-6>` which is less
-  // than 10 anyways...
-  @for $i from 0 to 10 {
-    .nav-link.toc-level-#{$i} {
-      padding-left: $base-nav-link-padding * ($i + 1);
-    }
-  }
-}
-
-@media(min-width:1100px) and (max-width:1600px) {
-  $doc-nav-width: 19vw;
-
-  .doc-nav {
-    width: $doc-nav-width;
-  }
-}
-
-// wide enough to show quick nav and toc
-@media(min-width:1601px) {
-  $doc-nav-desired-width: 0;
-  // Get around the scroll bar
-  $doc-nav-width: 21%;
-
-  .doc-nav {
-    width: $doc-nav-width;
-  }
 }