From 2c08618d03f4f662bd1867ee4857f9de1f05f0d8 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Sun, 3 Jan 2016 18:12:29 +0000
Subject: [PATCH] Externalise header

---
 .../src/js/components/navbar/navbar-header.js | 29 +++++++++++++++++++
 static/src/js/components/navbar/navbar.js     | 20 ++-----------
 2 files changed, 32 insertions(+), 17 deletions(-)
 create mode 100644 static/src/js/components/navbar/navbar-header.js

diff --git a/static/src/js/components/navbar/navbar-header.js b/static/src/js/components/navbar/navbar-header.js
new file mode 100644
index 0000000..b129774
--- /dev/null
+++ b/static/src/js/components/navbar/navbar-header.js
@@ -0,0 +1,29 @@
+import React from 'react';
+var ReactBootstrap = require('react-bootstrap');
+
+export default class NavBarHeader extends React.Component {
+  render() {
+    const items = [0, 1, 2];
+    var iconBars = items.map(function (item) {
+      return (
+        <span className="icon-bar" key={item} />
+      );
+    });
+    return (
+      <div className="navbar-header">
+        <button type="button"
+          className="navbar-toggle collapsed"
+          data-toggle="collapse"
+          data-target="#navbar"
+          aria-expanded="false" >
+          <span className="sr-only">Toggle navigation</span>
+          {{ iconBars }}
+        </button>
+        <a className="navbar-brand visible-xs">
+          <i className="icon ion-compass" />
+          Navigation
+        </a>
+      </div>
+    );
+  }
+}
diff --git a/static/src/js/components/navbar/navbar.js b/static/src/js/components/navbar/navbar.js
index 7c677c4..5ae32a0 100644
--- a/static/src/js/components/navbar/navbar.js
+++ b/static/src/js/components/navbar/navbar.js
@@ -1,12 +1,6 @@
 import React from 'react';
-var ReactBootstrap = require('react-bootstrap');
-var {
-  Navbar,
-  Nav,
-  MenuItem,
-  NavItem,
-  NavDropdown
-} = ReactBootstrap;
+import NavBarHeader from './navbar-header';
+var NavItem = require('react-bootstrap').NavItem;
 
 export default class NavBar extends React.Component {
   render() {
@@ -16,15 +10,7 @@ export default class NavBar extends React.Component {
         <div id="navbar-container" className="align h4">
           <nav className="navbar navbar-inverse">
             <div className="container-fluid">
-              <div className="navbar-header">
-                <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
-                  <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 visible-xs"><i className="icon ion-compass"></i> Navigation</a>
-              </div>
+              <NavBarHeader />
               <div className="collapse navbar-collapse" id="navbar">
                 <ul className="nav navbar-nav home-button hidden-sm">
                   <li className="active home"><a href=""><i className="icon ion-home"></i></a></li>