From 189af27ec744321c4d4e6c3f6d02a322269d6da2 Mon Sep 17 00:00:00 2001
From: Sunny Hirai <thesunny@gmail.com>
Date: Sun, 25 Dec 2016 21:18:39 -0800
Subject: [PATCH] Updated examples to add GitHub and Docs link + some styling.
 (#531)

---
 examples/index.css | 37 +++++++++++++++++++++++++++++++++++--
 examples/index.js  | 23 +++++++++++++++++++++++
 2 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/examples/index.css b/examples/index.css
index 94ddda65f..63632064b 100644
--- a/examples/index.css
+++ b/examples/index.css
@@ -86,8 +86,33 @@ input:focus {
  * App.
  */
 
+.topbar {
+  padding: 10px 15px;
+  color: #AAA;
+  background: #000;
+}
+
+.topbar-title {
+  margin-right: 0.5em;
+}
+
+.topbar-links {
+  float: right;
+}
+
+.topbar-link {
+  margin-left: 1em;
+  color: #AAA;
+  text-decoration: none;
+}
+
+.topbar-link:hover {
+  color: #FFF;
+  text-decoration: underline;
+}
+
 .tabs {
-  padding: 20px;
+  padding: 15px 15px;
   background-color: #222;
   text-align: center;
   margin-bottom: 30px;
@@ -97,14 +122,22 @@ input:focus {
   color: #777;
   display: inline-block;
   text-decoration: none;
+  padding: 0.2em 0.5em;
+  border-radius: 0.2em;
+  margin-bottom: 0.2em;
+}
+
+.tab:hover {
+  background: #333;
 }
 
 .tab + .tab {
-  margin-left: 30px;
+  margin-left: 0.5em;
 }
 
 .tab.active {
   color: white;
+  background: #333;
 }
 
 /**
diff --git a/examples/index.js b/examples/index.js
index f8bf9e8a0..5a9e08d48 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -53,12 +53,35 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
+        {this.renderTopBar()}
         {this.renderTabBar()}
         {this.renderExample()}
       </div>
     )
   }
 
+  /**
+   * Render the top bar.
+   *
+   * @return {Element} element
+   */
+
+  renderTopBar() {
+    return (
+      <div className="topbar">
+        <span className="topbar-title">Slate Examples</span>
+        <div className="topbar-links">
+          <a className="topbar-link" href="https://github.com/ianstormtaylor/slate">
+            GitHub
+          </a>
+          <a className="topbar-link" href="https://docs.slatejs.org/">
+            Docs
+          </a>
+        </div>
+      </div>
+    )
+  }
+
   /**
    * Render the tab bar.
    *