Added dropdown component helpers

static/src/js/components/navbar/dropdown-item.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default class DropdownItem extends React.Component {
+  render() {
+    return (
+      <li><a href={this.props.href}><i className={'icon ' + this.props.icon}></i> {this.props.children}</a></li>
+    );
+  }
+}

static/src/js/components/navbar/dropdown.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default class Dropdown extends React.Component {
+  render() {
+    return (
+      <li className="dropdown">
+        <a className="dropdown-toggle"
+          data-toggle="dropdown"
+          role="button"
+          aria-haspopup="true"
+          aria-expanded="false">
+          { this.props.title } <i className="icon ion-ios-arrow-up navbar-icon h4"></i>
+        </a>
+        <ul className="dropdown-menu dropup">
+          { this.props.children }
+        </ul>
+      </li>
+    );
+  }
+}

static/src/js/components/navbar/header.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default class NavBarHeader extends React.Component {
+export default class Header extends React.Component {
   render() {
     const items = [0, 1, 2];
     var iconBars = items.map(function (item) {

static/src/js/components/navbar/navbar.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import NavBarHeader from './navbar-header';
+import Header from './header';
+import Dropdown from './dropdown';
+import DropdownItem from './dropdown-item';
 var NavItem = require('react-bootstrap').NavItem;
 
 export default class NavBar extends React.Component {
@@ -10,28 +12,19 @@ export default class NavBar extends React.Component {
         <div id="navbar-container" className="align h4">
           <nav className="navbar navbar-inverse">
             <div className="container-fluid">
-              <NavBarHeader />
+              <Header />
               <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>
                 </ul>
                 <ul className="nav navbar-nav" id="navigation">
-                  <li className="dropdown">
+                  <Dropdown title="Projects">
-                    <a className="dropdown-toggle"
+                    <DropdownItem href="#" icon="ion-social-freebsd-devil">Pithos</DropdownItem>
-                      data-toggle="dropdown"
+                    <DropdownItem href="#" icon="ion-ios-monitor">BSOD Enabler</DropdownItem>
-                      role="button"
+                    <DropdownItem href="#" icon="ion-chatbox-working">Hipchat Emoticons for All</DropdownItem>
-                      aria-haspopup="true"
+                    <DropdownItem href="#" icon="ion-social-windows">Custom PC</DropdownItem>
-                      aria-expanded="false">
+                    <DropdownItem href="#" icon="ion-android-more-vertical">More Projects...</DropdownItem>
-                      Projects <i className="icon ion-ios-arrow-up navbar-icon h4"></i>
+                  </Dropdown>
-                    </a>
-                    <ul className="dropdown-menu dropup">
-                      <li><a href="#"><i className="icon ion-social-freebsd-devil"></i> Pithos</a></li>
-                      <li><a href=""><i className="icon ion-ios-monitor"></i> BSOD Enabler</a></li>
-                      <li><a href=""><i className="icon ion-chatbox-working"></i> Hipchat Emoticons for All</a></li>
-                      <li><a href=""><i className="icon ion-social-windows"></i> Custom PC</a></li>
-                      <li><a href=""><i className="icon ion-android-more-vertical"></i> All Projects...</a></li>
-                    </ul>
-                  </li>
                   <li className="dropdown">
                     <a className="dropdown-toggle"
                       data-toggle="dropdown"
@@ -44,9 +37,6 @@ export default class NavBar extends React.Component {
                       <li><a href="#"><i className="icon ion-code-working"></i> Code Challenges</a></li>
                       <li><a href=""><i className="icon ion-ios-circle-filled"></i> Morse Code Decoder</a></li>
                       <li><a href=""><i className="icon ion-ios-game-controller-a"></i> The Wiki Game Solver</a></li>
-                      <li><a href="">
-                        <span className="glyphicon glyphicon-print" aria-hidden="true"></span> Printr
-                      </a></li>
                     </ul>
                   </li>
                   <NavItem href="#">Link 1</NavItem>