From e55ed7fc28ce3aaa5bb36d9ec3216d1462cd9adb Mon Sep 17 00:00:00 2001
From: Scott Anderson <scott@influxdata.com>
Date: Fri, 21 Dec 2018 10:12:28 -0700
Subject: [PATCH] styled sidebar searchbar

---
 assets/styles/layouts/_layout-article.scss |  5 +++
 assets/styles/layouts/_layout-global.scss  |  1 +
 assets/styles/layouts/_layout-sidebar.scss | 44 ++++++++++++++++++++++
 assets/styles/styles-default.scss          |  4 +-
 assets/styles/themes/_theme-dark.scss      |  9 +++++
 assets/styles/themes/_theme-light.scss     | 13 ++++++-
 config.toml                                |  5 +++
 layouts/partials/sidebar.html              | 17 +++++++++
 layouts/partials/topnav.html               |  2 -
 9 files changed, 95 insertions(+), 5 deletions(-)
 create mode 100644 assets/styles/layouts/_layout-article.scss

diff --git a/assets/styles/layouts/_layout-article.scss b/assets/styles/layouts/_layout-article.scss
new file mode 100644
index 000000000..41cc44ea3
--- /dev/null
+++ b/assets/styles/layouts/_layout-article.scss
@@ -0,0 +1,5 @@
+.article {
+  flex-grow: 3;
+  background: $article-bg;
+  border-radius: $border-radius 0 0 0;
+}
diff --git a/assets/styles/layouts/_layout-global.scss b/assets/styles/layouts/_layout-global.scss
index 8022b0e08..8d9fab43f 100644
--- a/assets/styles/layouts/_layout-global.scss
+++ b/assets/styles/layouts/_layout-global.scss
@@ -31,4 +31,5 @@ a {
 
 .page-wrapper {
   display: flex;
+  flex-grow: 1;
 }
diff --git a/assets/styles/layouts/_layout-sidebar.scss b/assets/styles/layouts/_layout-sidebar.scss
index e69de29bb..e343cf6e9 100644
--- a/assets/styles/layouts/_layout-sidebar.scss
+++ b/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);
+      }
+    }
+
+
+  }
+}
diff --git a/assets/styles/styles-default.scss b/assets/styles/styles-default.scss
index 7868d5ee2..f8fbfea50 100644
--- a/assets/styles/styles-default.scss
+++ b/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";
diff --git a/assets/styles/themes/_theme-dark.scss b/assets/styles/themes/_theme-dark.scss
index 7200f6762..04c3391c3 100644
--- a/assets/styles/themes/_theme-dark.scss
+++ b/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;
diff --git a/assets/styles/themes/_theme-light.scss b/assets/styles/themes/_theme-light.scss
index 7ddd093b2..930e8ad79 100644
--- a/assets/styles/themes/_theme-light.scss
+++ b/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;
diff --git a/config.toml b/config.toml
index e6a024426..202625296 100644
--- a/config.toml
+++ b/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"
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index e69de29bb..88e7f29eb 100644
--- a/layouts/partials/sidebar.html
+++ b/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>
diff --git a/layouts/partials/topnav.html b/layouts/partials/topnav.html
index 7b89880a8..e42946296 100644
--- a/layouts/partials/topnav.html
+++ b/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>