feat(cookbook): add version switch

docs/cookbook/web/_navbar.md

@@ -1,4 +1,11 @@
 - Resources
+  - [Docs](https://docs.github.io)
   - [Cookbook](https://cookbook.syncano.io)
   - [Cheatsheet](https://cheatsheet.syncano.io)
-  - [Docs](https://syncano.github.io/syncano-node-cli)
+
+<div class="c-version-select">
+  <select data-version>
+    <option value="master">master</option>
+    <option value="0">0.8</option>
+  </select>
+</div>

docs/cookbook/web/css/coverpage.css

@@ -17,6 +17,75 @@ html{
 body {
   background: #fff !important;
 }
+/*----------------
+ 	Top Nav Bar
+----------------*/
+
+.app-nav {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  top: 25px;
+  right: 80px;
+}
+
+.app-nav > * + * {
+  margin-left: 16px;
+}
+
+.app-nav li ul {
+  overflow-y: hidden;
+  padding: 8px 0;
+}
+
+.app-nav li ul li {
+  padding: 0;
+  margin: 0;
+}
+
+.app-nav li ul a {
+  padding: 7px 15px;
+  transition: background-color .25s;
+}
+.app-nav li ul a:hover {
+  background-color: rgba(56, 113, 208, .1);
+}
+
+.c-version-select {
+  position: relative;
+  border-radius: 4px;
+  background: #187eef;
+}
+.c-version-select:after {
+  content: '';
+  position: absolute;
+  right: 8px;
+  top: 16px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  border-color: #ffffff transparent transparent transparent;
+}
+.c-version-select select {
+  position: relative;
+  z-index: 1;
+  border: none;
+  background-color: transparent;
+  padding: 10px 28px 10px 14px;
+  color: #fff;
+  font-weight: bold;
+  display: block;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  line-height: 16px;
+  cursor: pointer;
+}
+.c-version-select option { color: #333; }
+.c-version-select select:focus {
+  outline: none;
+}
 
 /*----------------
  	Hero Section

docs/cookbook/web/index.html

@@ -22,7 +22,34 @@
     subMaxLevel: 2,
     homepage: './intro.md',
     coverpage: false,
-    loadNavbar: true
+    loadNavbar: true,
+    plugins: [
+      function (hook, vm) {
+        hook.ready(function() {
+          setTimeout(() => {
+            const version = window.location.host.match(/^[0-9\.|master]+/) || 'master';
+
+            [].forEach.call(document.querySelectorAll('.app-nav a'), a => {
+              a.setAttribute('href', a.getAttribute('href').replace('https://', `https://${version}-`))
+            })
+
+            const $select = document.querySelector('[data-version]')
+            const $options = document.querySelectorAll(`[data-version] option`)
+            const $selectedOption = document.querySelector(`option[value="${version}"]`)
+            const selectedOptionIndex = Array.prototype.indexOf.call($options, $selectedOption)
+
+            $select.selectedIndex = selectedOptionIndex >= 0 ? selectedOptionIndex : 0
+
+            $select.addEventListener('change', event => {
+              const version = event.target.value
+              const url = event.target.options[event.target.selectedIndex].dataset.url
+
+              window.location.href = url || `https://${version}-cookbook.syncano.io`
+            })
+          }, 100);
+        })
+      }
+    ]
   };
 </script>
 <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>

docs/docs/_coverpage.md

@@ -43,9 +43,9 @@
       </div>
     </div>
     <div class="buttons">
-      <a class="button side-button" href="https://cookbook.syncano.io/#/">Cookbook</a>
+      <a class="button side-button" href="https://cookbook.syncano.io">Cookbook</a>
       <a class="button main-button" href="#/getting-started/quickstart">Docs</a>
-      <a class="button side-button" href="https://cheatsheet.syncano.io/#/">Cheatsheet</a>
+      <a class="button side-button" href="https://cheatsheet.syncano.io">Cheatsheet</a>
     </div>
   </section>
 </div>

docs/docs/_navbar.md

@@ -1,11 +1,12 @@
 - Resources
-  - [Cheatsheet](https://cheatsheet.syncano.io/#/)
-  - [Cookbook](https://cookbook.syncano.io/#/) 
+  - [Docs](https://docs.github.io)
+  - [Cookbook](https://cookbook.syncano.io)
+  - [Cheatsheet](https://cheatsheet.syncano.io)
 
 <div class="c-version-select">
   <select data-version>
     <option value="master">master</option>
     <option value="0">0.8</option>
-    <option value="legacy" data-url="https://docs.syncano.io">legacy</option>
+    <option value="legacy" data-url="https://legacy-docs.syncano.io">legacy</option>
   </select>
 </div>

docs/docs/css/docs.css

@@ -1,8 +1,3 @@
 .markdown-section code {
   color: #E51148;
 }
-
-button.sidebar-toggle {
-  top: 0;
-  bottom: auto;
-}