From 951892a85ce424394f0215ad34652b49a858568a Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Wed, 20 May 2015 17:35:52 +0200
Subject: [PATCH] Add header

---
 css/main.css                 |  6 +++++-
 js/components/ascribe_app.js |  4 ++--
 js/components/header.js      | 29 ++++++++++++++++++++++++++++-
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/css/main.css b/css/main.css
index 8a790a64..754233a1 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,3 +1,7 @@
+#main {
+    padding-top: 70px;
+}
+
 .ascribe-table-header-column {
     font-weight: bold;
-}
\ No newline at end of file
+}
diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index 093b06dd..7d19c1b0 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -11,9 +11,9 @@ let AscribeApp = React.createClass({
         return (
             <div>
                 <Header />
-                <navigation>
+                <nav>
                     <Link to="pieces">pieces</Link>
-                </navigation>
+                </nav>
                 <RouteHandler />
             </div> 
         );
diff --git a/js/components/header.js b/js/components/header.js
index 71d67197..b685371a 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -21,7 +21,34 @@ let Header = React.createClass({
 
     render() {
         return (
-            <div>hello {this.state.currentUser.username}</div>
+            <nav className="navbar navbar-default navbar-fixed-top">
+              <div className="container">
+                <div className="navbar-header">
+                  <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                    <span className="sr-only">Toggle navigation</span>
+                    <span className="icon-bar"></span>
+                    <span className="icon-bar"></span>
+                    <span className="icon-bar"></span>
+                  </button>
+                  <a className="navbar-brand" href="#">ascribe</a>
+                </div>
+                <div id="navbar" className="navbar-collapse collapse">
+                  <ul className="nav navbar-nav navbar-right">
+                    <li className="dropdown">
+                      <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{this.state.currentUser.username} <span className="caret"></span></a>
+                      <ul className="dropdown-menu" role="menu">
+                        <li><a href="/art/faq/">Account Settings</a></li>
+                        <li className="divider"></li>
+                        <li><a href="/art/faq/">FAQ</a></li>
+                        <li><a href="/art/terms/">Terms of Service</a></li>
+                        <li className="divider"></li>
+                        <li><a href="/api/users/logout/">Log out</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </nav>
         )
     }
 });