Added nav and navitem compons.

package.json

@@ -6,6 +6,7 @@
     "react-scripts": "0.6.1"
   },
   "dependencies": {
+    "classnames": "^2.2.5",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
     "react-router": "^3.0.0",

src/Components/App.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 // Components
 import CompanyList from './CompanyList';
 import SearchBar from './SearchBar';
+import Nav from './Nav';
 
 class App extends Component {
 
@@ -21,6 +22,7 @@ class App extends Component {
   render() {
     return (
       <div className="App">
+				<Nav />
       	<SearchBar onInput={this.searchPerformed.bind(this)} placeholder="Search by company name..."/>
         <CompanyList searchString={this.state.searchString}/>
       </div>

src/Components/Nav.js

@@ -0,0 +1,27 @@
+import React, { Component, PropTypes } from 'react';
+
+import NavItem from './NavItem';
+
+class Nav extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <nav className="mainNav">
+        <ul className="nav">
+          <NavItem text="Home" active={true} />
+          <NavItem text="About" active={false} />
+          <NavItem text="Contribute" active={false} />
+        </ul>
+      </nav>
+    );
+  }
+}
+
+export default Nav;

src/Components/NavItem.js

@@ -0,0 +1,29 @@
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+
+class NavItem extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    text: PropTypes.string.isRequired,
+    active: PropTypes.bool.isRequired
+  };
+
+  constructor(props) {
+    super(props); 
+  }
+
+  render() {
+    var navItemClasses = classNames({
+      'navItem': true,
+      'active': this.props.active
+    });
+
+    return (
+      <li className={navItemClasses}>
+        {this.props.text}
+      </li>
+    );
+  }
+}
+
+export default NavItem;

src/Styles/Components/_CompanyList.scss

@@ -2,9 +2,9 @@
 	background-color: $color-main;
 	border-radius: $border-radius-main;
 	border: 1px solid $color-main-border;
-	width: 750px;
-	margin: 20px auto 0px auto;
+	margin: $component-vertical-sep auto 0px auto;
 	font-size: 4.8rem;
+	@include componentwidth();
 }
 
 .companyList > .company:first-child {

src/Styles/Components/_Nav.scss

@@ -0,0 +1,19 @@
+.mainNav {
+  height: 45px;
+  margin:  30px auto $component-vertical-sep auto;
+  font-size: 1.6rem;
+  font-family: 'Roboto', 'sans-serif';
+  letter-spacing: 0.15rem;
+  color: $color-main-border;
+  border-bottom: 1px solid rgba($color-main-border, 0.7);
+  @include componentwidth();
+}
+
+.nav {
+  list-style: none;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/Styles/Components/_NavItem.scss

@@ -0,0 +1,26 @@
+@mixin navactive() {
+  color: $color-button-primary;
+  border-bottom: 1px solid $color-button-primary;
+  font-weight: bold;
+}
+
+.navItem {
+  margin-bottom: -2px;
+  display: inline-block;
+  margin-right: 30px;
+  height: 100%;
+  line-height: 45px;
+  cursor: pointer;
+
+  &:hover {
+    @include navactive();
+  }
+
+  .navItem:last-child {
+    margin-right: 0;
+  }
+}
+
+.nav .active {
+  @include navactive();
+}

src/Styles/Components/_SearchBar.scss

@@ -1,8 +1,8 @@
 .searchBar {
-	width: 750px;
 	margin: 20px auto 0px auto;
 	display: flex;
 	align-content: center;
+	@include componentwidth();
 }
 
 .searchInput {

src/Styles/_mixins.scss

@@ -0,0 +1,5 @@
+@mixin componentwidth() {
+	width: $main-content-width;
+	max-width: 850px;
+	min-width: 500px;
+}

src/Styles/_variables.scss

@@ -1,6 +1,11 @@
+// Color Variables
 $color-main: #F6F6F6;
 $color-button-primary: #007ee5;
 $color-main-text: #515357;
 $color-opening-base: #FFFFFF;
 $color-main-border: #B9BCC6;
-$border-radius-main: 3px;
+
+
+$border-radius-main: 3px;
+$main-content-width: 60%;
+$component-vertical-sep: 35px;

src/Styles/main.scss

@@ -5,7 +5,10 @@
 @import "compass";
 @import "compass/reset";
 @import "variables";
+@import "mixins";
 @import "Components/App";
+@import "Components/Nav";
+@import "Components/NavItem";
 @import "Components/About";
 @import "Components/NotFound";
 @import "Components/CompanyList";