From 9a036b40e6b0c9920706aab733bbe600dc7e67cf Mon Sep 17 00:00:00 2001
From: Roman Gotsiy <gotsijroman@gmail.com>
Date: Wed, 4 Nov 2015 21:31:10 +0200
Subject: [PATCH] Add navbar

---
 demo/index.html |  6 ++++++
 demo/main.css   | 37 +++++++++++++++++++++++++++++++++++++
 demo/main.js    |  9 +++++++++
 3 files changed, 52 insertions(+)
 create mode 100644 demo/main.js
diff --git a/demo/index.html b/demo/index.html
index 28f0293c..0a703013 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -6,6 +6,11 @@
     <link rel="stylesheet" href="dist/redoc.full.css">
   </head>
   <body>
+    <nav>
+      <input id="schema-url-input" value='swagger.json'>
+      <button id="load-button"> Explore </button>
+    </nav>
+    </nav>
     <side-menu>
     </side-menu>
     <!-- The wrapper component -->
@@ -15,6 +20,7 @@
 
     <!-- ReDoc built file with all dependencies included -->
     <script src="dist/redoc.full.js"> </script>
+    <script src="main.js"> </script>
     <script>
       /* init redoc */
       Redoc.init('swagger.json');
diff --git a/demo/main.css b/demo/main.css
index 2d12215e..6c37fa47 100644
--- a/demo/main.css
+++ b/demo/main.css
@@ -4,6 +4,43 @@ body {
   color: #333;
   margin: 0;
   line-height: 1.5;
+  padding-top: 50px;
+}
+
+nav input, nav button  {
+  font-size: 16px;
+  line-height: 28px;
+  height: 28px;
+  box-sizing: border-box;
+  vertical-align: middle;
+  line-height: 1;
+  outline: none;
+}
+
+nav input {
+  width: 50%;
+  box-sizing: border-box;
+  max-width: 500px;
+}
+
+nav button {
+  background-color: white;
+  border: 1px solid #FFFFFF;
+  cursor: pointer;
+  color: white;
+  background-color: #21476D;
+  padding: 2px 10px;
+}
+
+nav {
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  background-color: #053361;
+  position: fixed;
+  top: 0;
+  z-index: 1;
 }
 
 side-menu, redoc {
diff --git a/demo/main.js b/demo/main.js
new file mode 100644
index 00000000..70529977
--- /dev/null
+++ b/demo/main.js
@@ -0,0 +1,9 @@
+;(function() {
+  'use strict';
+
+  var loadButton = document.getElementById('load-button');
+  var schemaUrlInput = document.getElementById('schema-url-input');
+  loadButton.addEventListener('click', function() {
+    Redoc.init(schemaUrlInput.value);
+  })
+})();
