From b5a7439749197b0f7109c98509699bb32f6e8f20 Mon Sep 17 00:00:00 2001
From: Salakar <mike.diarmid@gmail.com>
Date: Sat, 26 Aug 2017 03:59:48 +0100
Subject: [PATCH] [docs] update doc styling

---
 docs/README.md     |   7 ---
 docs/_navbar.md    |   2 +-
 docs/index.html    | 121 +++++++++++++++++++++++++++++++++++++++++----
 docs/v2/README.md  |   7 ---
 docs/v2/_navbar.md |   2 +-
 5 files changed, 113 insertions(+), 26 deletions(-)
diff --git a/docs/README.md b/docs/README.md
index 04461f31..f11d996d 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,10 +1,3 @@
-
-<h1 align="center">
-  <img src="https://camo.githubusercontent.com/6c827e5a0bb91259f82a1f4923ab7efa4891b119/687474703a2f2f692e696d6775722e636f6d2f303158514c30782e706e67"/><br>
-
-  React Native Firebase
-</h1>
-
 <div style="text-align: center;">
 [![npm version](https://img.shields.io/npm/v/react-native-firebase.svg?style=flat-square)](https://www.npmjs.com/package/react-native-firebase)
 [![NPM downloads](https://img.shields.io/npm/dm/react-native-firebase.svg?style=flat-square)](https://www.npmjs.com/package/react-native-firebase)
diff --git a/docs/_navbar.md b/docs/_navbar.md
index 3ef67c8e..eaab888c 100644
--- a/docs/_navbar.md
+++ b/docs/_navbar.md
@@ -1,3 +1,3 @@
-- <div style="padding: 8px; border-radius: 3px; border: 1px solid #e3e3e3;"><b>Version:</b> v3.x.x</div>
+- <div class="version-select"><b>Version:</b> v3.x.x</div>
   - [v2.x.x](/v2/)
 
diff --git a/docs/index.html b/docs/index.html
index 0364e5ec..3b1b7301 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,13 +2,21 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>React Native Firebase - A react native firebase library supporting both android and ios native firebase SDK's</title>
-  <meta name="description" content="A react native firebase library supporting both android and ios native firebase SDK's">
-  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <link rel="shortcut icon" type="image/png" href="https://camo.githubusercontent.com/6c827e5a0bb91259f82a1f4923ab7efa4891b119/687474703a2f2f692e696d6775722e636f6d2f303158514c30782e706e67"/>
+  <title>React Native Firebase - A react native firebase library supporting both android and ios native firebase
+    SDK's</title>
+  <meta name="description"
+        content="A react native firebase library supporting both android and ios native firebase SDK's">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <link rel="shortcut icon" type="image/png"
+        href="https://camo.githubusercontent.com/6c827e5a0bb91259f82a1f4923ab7efa4891b119/687474703a2f2f692e696d6775722e636f6d2f303158514c30782e706e67" />
 </head>
 <body>
-  <div id="app"></div>
+<div class="rnfirebase-header">
+  <img src="https://static.invertase.io/assets/React-Native-Firebase.svg" alt="rnfirebase logo">
+  <span><a href="/">React Native Firebase</a></span>
+</div>
+<div id="app"></div>
 </body>
 <script>
   window.$docsify = {
@@ -18,18 +26,17 @@
     loadNavbar: true,
     mergeNavbar: true,
     search: 'auto',
-    themeColor: '#f5820b',
+    themeColor: '#e88634',
     subMaxLevel: 3,
     maxLevel: 4,
     ga: 'UA-98196653-1',
     formatUpdated: '{DD}/{MM}/{YYYY} {HH}:{mm}',
     plugins: [
-      function(hook, vm) {
+      function (hook, vm) {
         hook.beforeEach(function (html) {
           var url = 'https://github.com/invertase/react-native-firebase/blob/master/docs/' + vm.route.file;
           var editHtml = '[:memo: Edit](' + url + ')\n';
-          return editHtml
-            + html
+          return html
             + '\n----\n'
             + '<b>Last updated</b>: {docsify-updated} '
             + editHtml
@@ -43,9 +50,103 @@
     navigator.serviceWorker.register('sw.js')
   }
 </script>
+<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
+<style>
+  body {
+    padding-top: 35px;
+  }
+
+  .app-name-link {
+    display: none;
+  }
+
+  .sidebar {
+    padding-top: 64px;
+  }
+
+  .github-corner {
+    height: 64px;
+    z-index: 9996;
+  }
+
+  .app-nav {
+    z-index: 9996;
+  }
+
+  .github-corner > svg {
+    height: 64px;
+    width: 64px;
+  }
+
+  .rnfirebase-header {
+    width: 100%;
+    height: 64px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: #383838;
+    z-index: 9995;
+    vertical-align: middle;
+  }
+
+  .rnfirebase-header > img {
+    float: left;
+    width: 45px;
+    height: 45px;
+    margin: 10px;
+  }
+
+  .version-select {
+    position: fixed;
+    right: 70px;
+    top: 13px;
+    background: rgb(255, 235, 213);
+    padding: 8px;
+    border: 1px solid #e88634;
+    width: 110px;
+  }
+
+  .rnfirebase-header > span {
+    float: left;
+    height: 64px;
+    font-size: 24px;
+    line-height: 64px;
+    color: #e88634;
+    text-align: center;
+  }
+
+  .rnfirebase-header > span > a {
+    border:none;
+    outline:none;
+    text-decoration:none;
+    color:inherit;
+    -webkit-tap-highlight-color: white;
+  }
+
+  .sidebar-toggle {
+    background-color: rgba(255, 255, 255, 0.92);
+  }
+
+  .app-nav li ul {
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-bottom-color: #ccc;
+    border-radius: 2px;
+    box-sizing: border-box;
+    display: none;
+    max-height: calc(100vh - 61px);
+    overflow-y: scroll;
+    padding: 10px 0;
+    position: absolute;
+    right: 8px;
+    text-align: left;
+    top: -16px;
+    white-space: nowrap;
+    width: 111px;
+  }
+</style>
 <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
 <script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
-<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
 <script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
 <script src="//unpkg.com/docsify/lib/plugins/ga.min.js"></script>
 <script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
diff --git a/docs/v2/README.md b/docs/v2/README.md
index 04461f31..f11d996d 100644
--- a/docs/v2/README.md
+++ b/docs/v2/README.md
@@ -1,10 +1,3 @@
-
-<h1 align="center">
-  <img src="https://camo.githubusercontent.com/6c827e5a0bb91259f82a1f4923ab7efa4891b119/687474703a2f2f692e696d6775722e636f6d2f303158514c30782e706e67"/><br>
-
-  React Native Firebase
-</h1>
-
 <div style="text-align: center;">
 [![npm version](https://img.shields.io/npm/v/react-native-firebase.svg?style=flat-square)](https://www.npmjs.com/package/react-native-firebase)
 [![NPM downloads](https://img.shields.io/npm/dm/react-native-firebase.svg?style=flat-square)](https://www.npmjs.com/package/react-native-firebase)
diff --git a/docs/v2/_navbar.md b/docs/v2/_navbar.md
index 9c094393..dbf53533 100644
--- a/docs/v2/_navbar.md
+++ b/docs/v2/_navbar.md
@@ -1,3 +1,3 @@
-- <div style="padding: 8px; border-radius: 3px; border: 1px solid #e3e3e3;"><b>Version:</b> v2.x.x</div>
+- <div class="version-select"><b>Version:</b> v2.x.x</div>
   - [v3.x.x](/)
 
