From b213cff6db69bed0cdbd195d39c67b45840c00a8 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Thu, 7 Jan 2016 18:30:08 +0000
Subject: [PATCH] Added dropdown component helpers

---
 .../src/js/components/navbar/dropdown-item.js |  9 ++++++
 static/src/js/components/navbar/dropdown.js   | 20 ++++++++++++
 .../navbar/{navbar-header.js => header.js}    |  2 +-
 static/src/js/components/navbar/navbar.js     | 32 +++++++------------
 4 files changed, 41 insertions(+), 22 deletions(-)
 create mode 100644 static/src/js/components/navbar/dropdown-item.js
 create mode 100644 static/src/js/components/navbar/dropdown.js
 rename static/src/js/components/navbar/{navbar-header.js => header.js} (91%)

diff --git a/static/src/js/components/navbar/dropdown-item.js b/static/src/js/components/navbar/dropdown-item.js
new file mode 100644
index 0000000..12048a9
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/static/src/js/components/navbar/dropdown.js b/static/src/js/components/navbar/dropdown.js
new file mode 100644
index 0000000..93bb529
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/static/src/js/components/navbar/navbar-header.js b/static/src/js/components/navbar/header.js
similarity index 91%
rename from static/src/js/components/navbar/navbar-header.js
rename to static/src/js/components/navbar/header.js
index b92722b..5b2137c 100644
--- a/static/src/js/components/navbar/navbar-header.js
+++ b/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) {
diff --git a/static/src/js/components/navbar/navbar.js b/static/src/js/components/navbar/navbar.js
index 2cf7b57..726f89f 100644
--- a/static/src/js/components/navbar/navbar.js
+++ b/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">
-                    <a className="dropdown-toggle"
-                      data-toggle="dropdown"
-                      role="button"
-                      aria-haspopup="true"
-                      aria-expanded="false">
-                      Projects <i className="icon ion-ios-arrow-up navbar-icon h4"></i>
-                    </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>
+                  <Dropdown title="Projects">
+                    <DropdownItem href="#" icon="ion-social-freebsd-devil">Pithos</DropdownItem>
+                    <DropdownItem href="#" icon="ion-ios-monitor">BSOD Enabler</DropdownItem>
+                    <DropdownItem href="#" icon="ion-chatbox-working">Hipchat Emoticons for All</DropdownItem>
+                    <DropdownItem href="#" icon="ion-social-windows">Custom PC</DropdownItem>
+                    <DropdownItem href="#" icon="ion-android-more-vertical">More Projects...</DropdownItem>
+                  </Dropdown>
                   <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>