styled sidebar searchbar

assets/styles/layouts/_layout-article.scss

@@ -0,0 +1,5 @@
+.article {
+  flex-grow: 3;
+  background: $article-bg;
+  border-radius: $border-radius 0 0 0;
+}

assets/styles/layouts/_layout-global.scss

@@ -31,4 +31,5 @@ a {
 
 .page-wrapper {
   display: flex;
+  flex-grow: 1;
 }

assets/styles/layouts/_layout-sidebar.scss

@@ -0,0 +1,44 @@
+.sidebar {
+  display: block;
+  flex-grow: 1;
+  padding: 0 1em 1em 1em;
+  max-width: 25%;
+
+  &--search {
+    position: relative;
+    &:after {
+      content: '\e905';
+      display: block;
+      font-family: 'icomoon';
+      position: absolute;
+      top: .15rem;
+      right: .25rem;
+      color: $article-text;
+      font-size: 1.75rem;
+    }
+
+    input {
+      background: $article-bg;
+      border-radius: $border-radius;
+      border: 1px solid $search-border;
+      padding: .5em;
+      width: 100%;
+      color: $article-text;
+      transition-property: border, box-shadow;
+      transition-duration: .2s;
+      &:focus {
+        outline: none;
+        border: 1px solid $search-highlight;
+        box-shadow: 0px 0px 7px rgba($search-highlight, .65);
+        border-radius: $border-radius;
+      }
+      &::placeholder {
+        font-family: 'Roboto';
+        font-weight: 500;
+        color: rgba($article-text, .35);
+      }
+    }
+
+
+  }
+}

assets/styles/styles-default.scss

@@ -9,4 +9,6 @@
 // Import Layout Styles
 @import "normalize/import-now",
         "layouts/layout-global",
-        "layouts/layout-topnav";
+        "layouts/layout-topnav",
+        "layouts/layout-sidebar",
+        "layouts/layout-article";

assets/styles/themes/_theme-dark.scss

@@ -24,3 +24,12 @@ $version-selector-top: $b-ocean !default;
 $version-selector-bottom: $p-star !default;
 $theme-switch-light: inline-block !default;
 $theme-switch-dark: none !default;
+
+// Sidebar
+$search-border: $g5-pepper !default;
+$search-highlight: $b-pool !default;
+
+// Article Content
+$article-bg: $g3-castle !default;
+$article-heading: $g19-ghost !default;
+$article-text: $g14-chromium !default;

assets/styles/themes/_theme-light.scss

@@ -19,7 +19,16 @@ $body-bg: $g18-cloud;
 // TopNav Colors
 $topnav-link: $g3-castle;
 $topnav-link-hover: $b-ocean;
-$version-selector-top: $b-pool !default;
-$version-selector-bottom: $gr-viridian !default;
+$version-selector-top: $b-pool;
+$version-selector-bottom: $gr-viridian;
 $theme-switch-light: none;
 $theme-switch-dark: inline-block;
+
+// Sidebar
+$search-border: $g15-platinum;
+$search-highlight: $b-pool;
+
+// Article Content
+$article-bg: $g20-white;
+$article-heading: $g5-pepper;
+$article-text: $g7-graphite;

config.toml

@@ -8,3 +8,8 @@ enableGitInfo = true
 # Syntax Highlighting
 pygmentsCodefences = true
 pygmentsUseClasses = true
+
+[menu]
+  [[menu.versions]]
+    name = "v1.x"
+    url = "https://docs.influxdata.com"

layouts/partials/sidebar.html

@@ -0,0 +1,17 @@
+{{ $currentVersion := (index (findRE "[^/]+.*?" .RelPermalink) 0) }}
+<div class="sidebar">
+  <div class="sidebar--search">
+    <input  class="sidebar--search-field"
+            id="algolia-search-input"
+            type="text"
+            accesskey="s"
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+            spellcheck="false"
+            dir="auto"
+            placeholder="Search {{ $currentVersion }}">
+
+  </div>
+  <p>Hello World</p>
+</div>

layouts/partials/topnav.html

@@ -16,9 +16,7 @@
           <li><a href="{{ .URL }}">{{ .Name }}</a></li>
         {{ end }}
     </div>
-
     <button class="theme-switcher" id="theme-switch-light" onclick="switch_style('light-theme');return false;"><span class="icon-sun1"></span></button>
     <button class="theme-switcher" id="theme-switch-dark" onclick="switch_style('dark-theme');return false;"><span class="icon-moon1"></span></button>
-
   </div>
 </div>