Collapsable left nav

assets/js/docs-themes.js

@@ -19,10 +19,9 @@ function switch_style ( css_title )
   var i, link_tag ;
   for (i = 0, link_tag = document.getElementsByTagName("link") ;
     i < link_tag.length ; i++ ) {
-    if ((link_tag[i].rel.indexOf("stylesheet") != -1) &&
-      link_tag[i].title) {
+    if ((link_tag[i].rel.indexOf("stylesheet") != -1) && link_tag[i].title.includes("theme")) {
       link_tag[i].disabled = true ;
-      if (link_tag[i].title == css_title) {
+      if (link_tag[i].title == css_title ) {
         link_tag[i].disabled = false ;
       }
     }

assets/js/sidebar-toggle.js

@@ -0,0 +1,38 @@
+/*
+	Copied and pasted this script for CSS swaps w/ cookies from
+	http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
+*/
+
+// *** TO BE CUSTOMISED ***
+var sidebar_state_cookie_name = "influx-docs-sidebar-state" ;
+var sidebar_state_duration = 30 ;
+var style_domain = "docs.influxdata.com" ;
+
+// *** END OF CUSTOMISABLE SECTION ***
+// You do not need to customise anything below this line
+
+function toggle_sidebar ( toggle_state )
+{
+// You may use this script on your site free of charge provided
+// you do not remove this notice or the URL below. Script from
+// http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
+  var i, link_tag ;
+  for (i = 0, link_tag = document.getElementsByTagName("link") ;
+    i < link_tag.length ; i++ ) {
+    if ((link_tag[i].rel.indexOf("stylesheet") != -1) && link_tag[i].title.includes("sidebar")) {
+      link_tag[i].disabled = true ;
+      if (link_tag[i].title == toggle_state ) {
+        link_tag[i].disabled = false ;
+      }
+    }
+    Cookies.set(sidebar_state_cookie_name, toggle_state);
+  }
+}
+
+function set_sidebar_state()
+{
+  var toggle_state = Cookies.get(sidebar_state_cookie_name);
+  if (toggle_state !== undefined) {
+    toggle_sidebar(toggle_state);
+  }
+}

assets/styles/layouts/_layout-article.scss

@@ -1,9 +1,7 @@
 .article {
-  flex-grow: 1;
   background: $article-bg;
-  border-radius: $border-radius 0 0 0;
+  border-radius: $border-radius 0 0 $border-radius;
   padding: 2rem 4rem 3rem;
-  width: 75%;
 }
 
 .article--content{
@@ -23,7 +21,7 @@
     font-weight: 300;
     font-style: italic;
     font-size: 2.65rem;
-    margin-bottom: 1em;
+    margin: .4em 0 1em;
   }
   h2 {
     font-size: 2rem;
@@ -572,13 +570,3 @@
 
   }
 }
-
-@include media(medium) {
-  .article { width: 100%; }
-}
-
-@media (min-width: 801px) and (max-width: 1200px) {
-  .article {
-    width: 70%;
-  }
-}

assets/styles/layouts/_layout-content-wrapper.scss

@@ -0,0 +1,30 @@
+.content-wrapper {
+  flex-grow: 1;
+  width: 75%;
+  position: relative;
+  border-radius: $border-radius 0 0 $border-radius;
+
+  .copyright {
+    padding: .5rem 1rem .5rem .5rem;
+    text-align: right;
+    font-size: .9rem;
+    color: rgba($article-text, .5);
+  }
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////// MEDIA QUERIES ////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////
+
+@include media(medium) {
+  .content-wrapper {
+    width: 100%;
+  }
+}
+
+@media (min-width: 801px) and (max-width: 1200px) {
+  .content-wrapper {
+    width: 70%;
+  }
+}

assets/styles/layouts/_layout-sidebar-toggle.scss

@@ -0,0 +1,85 @@
+$corner-radius: 10px;
+$vertical-offset: -14px;
+
+.sidebar-toggle {
+  position: absolute;
+  display: block;
+  height: 35px;
+  top: 3.25rem;
+  z-index: 100;
+  &:hover {
+    cursor: pointer;
+    &:before, &:after { cursor: default; }
+    a { color: rgba($article-text, 1); }
+  }
+
+  &:before, &:after {
+    display: block;
+    position: absolute;
+    width: $corner-radius;
+    height: $corner-radius;
+  }
+  &:before {
+    top: $vertical-offset;
+  }
+  &:after {
+    bottom: $vertical-offset;
+    transform: rotateX(180deg);
+  }
+
+  & > a {
+    font-family: "icomoon";
+    color: rgba($article-text, .5);
+    text-decoration: none;
+  }
+}
+
+
+.content-wrapper .sidebar-toggle {
+  display: none;
+  padding: .3rem .3rem .3rem .4rem;
+  width: 35px;
+  left: 0;
+  background-color: $body-bg;
+  border-radius: 0 $border-radius $border-radius 0;
+  &:before, &:after {
+    content: url('data:image/svg+xml;charset=UTF-8,
+      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 10" xml:space="preserve">
+      <path fill="'+$body-bg+'" d="M0,10h10V0C10,5.52,5.52,10,0,10z"/>
+      </svg>');
+    left: 0;
+  }
+  &:before { transform: rotateY(180deg); }
+  &:after { transform: rotate(180deg); }
+  & > a {
+    font-size: 1.25rem;
+  }
+}
+
+.sidebar .sidebar-toggle {
+  padding: .2rem;
+  width: 30px;
+  right: 0;
+  background-color: $article-bg;
+  border-radius: $border-radius 0 0 $border-radius;
+  &:before, &:after {
+    content: url('data:image/svg+xml;charset=UTF-8,
+      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 10" xml:space="preserve">
+      <path fill="'+$article-bg+'" d="M0,10h10V0C10,5.52,5.52,10,0,10z"/>
+      </svg>');
+    right: 0;
+  }
+  & > a {
+    font-size: 1.5rem;
+  }
+}
+
+////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////// MEDIA QUERIES ////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////
+
+@include media(medium) {
+  .sidebar-toggle{
+    display: none;
+  }
+}

assets/styles/layouts/_layout-sidebar.scss

@@ -1,5 +1,6 @@
 .sidebar {
   display: block;
+  position: relative;
   flex-grow: 1;
   padding: 0 1em;
   width: 25%;
@@ -41,7 +42,7 @@
     }
   }
 
-  .search-nav-toggle {
+  .search-and-nav-toggle {
     display: flex;
     width: 100%;
     margin-bottom: .7rem;

assets/styles/layouts/_layout-topnav.scss

@@ -3,9 +3,6 @@
   padding: .75rem .75rem .65rem;
   justify-content: space-between;
 
-  &--left {  }
-  &--right {  }
-
   .influx-home {
     font-family: 'icomoon';
     font-size: 1.9rem;
@@ -51,6 +48,7 @@
     border-radius: $border-radius;
     overflow: hidden;
     cursor: pointer;
+    transition: right .2s;
 
     .selected {
       padding: 0 1.5rem 0 .75rem;
@@ -109,7 +107,7 @@
     }
   }
 
-  .theme-switcher {
+  .theme-switcher, #search-btn {
     display: inline-block;
     padding: 0;
     font-size: 1.8rem;
@@ -119,7 +117,7 @@
     width: 30px;
     margin-top: 2px;
     border: none;
-    transition: color .2s;
+    transition: color .2s, opacity .2s;
     appearance: none;
     overflow: visible;
     &:focus {

assets/styles/sidebar-closed.scss

@@ -0,0 +1,61 @@
+// Sets CSS overides for when the sidebar is closed
+
+.sidebar {
+  width: 0;
+  overflow: hidden;
+  padding: 0;
+  transition: all .4s;
+
+  .search-and-nav-toggle,
+  #nav-tree,
+  .sidebar-toggle {
+    white-space: nowrap;
+    opacity: 0;
+    transition: all .1s;
+  }
+}
+
+.content-wrapper {
+  width: 100%;
+  .sidebar-toggle{
+    display: block;
+  }
+}
+
+.topnav {
+  #search-btn {
+    opacity: 1;
+  }
+  .version-selector {
+    right: 5.5rem;
+  }
+}
+
+////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////// MEDIA QUERIES ////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////
+
+@import "tools/media-queries";
+
+@include media(medium) {
+  .sidebar {
+    width: 100%;
+    overflow: auto;
+    padding: 0 1rem;
+  }
+  .search-and-nav-toggle, #nav-tree {
+    opacity: 1 !important;
+    white-space: normal;
+  }
+  .topnav {
+    #search-btn {
+      opacity: 0;
+    }
+    .version-selector {
+      right: 3.5rem;
+    }
+  }
+  .content-wrapper .sidebar-toggle {
+    display: none;
+  }
+}

assets/styles/sidebar-open.scss

@@ -0,0 +1,15 @@
+// Default state of having the sidebar open.
+
+.sidebar {
+  transition: all .2s;
+  .search-and-nav-toggle,
+  #nav-tree {
+    opacity: 1;
+    transition: all .3s;
+    transition-delay: .1s;
+  }
+}
+
+#search-btn {
+  opacity: 0;
+}

assets/styles/styles-default.scss

@@ -13,5 +13,7 @@
         "layouts/layout-global",
         "layouts/layout-topnav",
         "layouts/layout-sidebar",
+        "layouts/layout-sidebar-toggle",
+        "layouts/layout-content-wrapper",
         "layouts/layout-article",
         "layouts/syntax-highlighting";

assets/styles/tools/_color-palette.scss

@@ -19,7 +19,7 @@ $g14-chromium:    #C6CAD3;
 $g15-platinum:    #D4D7DD;
 $g16-pearl:       #E7E8EB;
 $g17-whisper:     #EEEFF2;
-$g18-cloud:       #F6F6F8;
+$g18-cloud:       #F2F2F5;
 $g19-ghost:       #FAFAFC;
 $g20-white:       #ffffff;
 

assets/styles/tools/_icomoon.scss

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?ppkm5');
-  src:  url('fonts/icomoon.eot?ppkm5#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?ppkm5') format('truetype'),
-    url('fonts/icomoon.woff?ppkm5') format('woff'),
-    url('fonts/icomoon.svg?ppkm5#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?o2njz5');
+  src:  url('fonts/icomoon.eot?o2njz5#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?o2njz5') format('truetype'),
+    url('fonts/icomoon.woff?o2njz5') format('woff'),
+    url('fonts/icomoon.svg?o2njz5#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -66,9 +66,24 @@
 .icon-check:before {
   content: "\e912";
 }
+.icon-chevron-down:before {
+  content: "\e917";
+}
+.icon-chevron-left:before {
+  content: "\e918";
+}
+.icon-chevron-right:before {
+  content: "\e919";
+}
+.icon-chevron-up:before {
+  content: "\e91a";
+}
 .icon-heart1:before {
   content: "\e913";
 }
+.icon-menu:before {
+  content: "\e91b";
+}
 .icon-settings:before {
   content: "\e914";
 }

content/v2.0/_index.md

@@ -2,6 +2,7 @@
 title: InfluxDB v2.0
 seotitle: This is the SEO title for InfluxDB v2.0
 description: placeholder
+layout: version-landing
 menu:
   versions:
     name: v2.0