From e6a747210e7d291c2465fefa5299a4adce586368 Mon Sep 17 00:00:00 2001
From: Scott Tolksdorf <scott.tolksdorf@gmail.com>
Date: Tue, 3 May 2016 23:47:55 -0400
Subject: [PATCH] New navbar is done for the homepage, looking really good

---
 client/homebrew/homePage/homePage.jsx | 25 +++++---
 client/homebrew/navbar/navbar.jsx     | 24 +++++--
 client/homebrew/navbar/navbar.less    | 18 +++++-
 shared/naturalCrit/nav/nav.jsx        | 74 ++++++++++++++++------
 shared/naturalCrit/nav/nav.less       | 91 +++++++++++++++++++++++++--
 5 files changed, 195 insertions(+), 37 deletions(-)

diff --git a/client/homebrew/homePage/homePage.jsx b/client/homebrew/homePage/homePage.jsx
index 08017f24d..3cbb7adf8 100644
--- a/client/homebrew/homePage/homePage.jsx
+++ b/client/homebrew/homePage/homePage.jsx
@@ -13,6 +13,8 @@ var Editor = require('../editor/editor.jsx');
 
 var Nav = require('naturalCrit/nav/nav.jsx');
 
+var Navbar = require('../navbar/navbar.jsx');
+
 
 
 
@@ -58,17 +60,22 @@ var HomePage = React.createClass({
 		return(
 			<div className='homePage'>
 
-
-				<Nav.base>
-					Test
-
-				</Nav.base>
+				<Navbar>
+					<Nav.item
+						href='/homebrew/changelog'
+						color='purple'
+						icon='fa-file-text-o'>
+						Changelog
+					</Nav.item>
+					<Nav.item
+						href='/homebrew/new'
+						color='green'
+						icon='fa-external-link'>
+						New Brew
+					</Nav.item>
+				</Navbar>
 
 
-
-				<Statusbar
-					printId="Nkbh52nx_l"
-				/>
 				<div className='paneSplit'>
 					<div className='leftPane'>
 						<Editor text={this.state.text} onChange={this.handleTextChange} />
diff --git a/client/homebrew/navbar/navbar.jsx b/client/homebrew/navbar/navbar.jsx
index b1647ec46..78cd74639 100644
--- a/client/homebrew/navbar/navbar.jsx
+++ b/client/homebrew/navbar/navbar.jsx
@@ -2,13 +2,27 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
-var COM = React.createClass({
+
+var Nav = require('naturalCrit/nav/nav.jsx');
+
+
+
+var Navbar = React.createClass({
 
 	render : function(){
-		return <div className='COM'>
-			COM Ready!
-		</div>
+		return <Nav.base>
+			<Nav.section>
+				<Nav.logo />
+				<Nav.item href='/homebrew' className='homebrewLogo'>
+					<div>The Homebrewery</div>
+				</Nav.item>
+			</Nav.section>
+
+			<Nav.section>
+				{this.props.children}
+			</Nav.section>
+		</Nav.base>
 	}
 });
 
-module.exports = COM;
+module.exports = Navbar;
diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 6bb4bdf5e..70f54163a 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -1,3 +1,19 @@
-.COM{
+.homebrew nav{
+
+	.homebrewLogo{
+		.animate(color);
+		font-family     : CodeBold;
+		font-size: 12px;
+
+		div{
+			margin-top: 3px;
+			margin-bottom: -3px;
+		}
+
+		color : white;
+		&:hover{
+			color : @blue;
+		}
+	}
 
 }
\ No newline at end of file
diff --git a/shared/naturalCrit/nav/nav.jsx b/shared/naturalCrit/nav/nav.jsx
index 0f1b81c1c..ae03ab8b6 100644
--- a/shared/naturalCrit/nav/nav.jsx
+++ b/shared/naturalCrit/nav/nav.jsx
@@ -3,47 +3,85 @@ var _ = require('lodash');
 var cx = require('classnames');
 
 var Nav = {
-
 	base : React.createClass({
 		render : function(){
 			return <nav>
-				<a href="/">
-
-				</a>
-
-
 				{this.props.children}
 			</nav>
 		}
 	}),
+	logo : function(){
+		return <a className='navLogo' href="/">
+			{Nav.logoSVG()}
+			<span className='name'>
+				Natural<span className='crit'>Crit</span>
+			</span>
+		</a>;
+	},
+	logoSVG : function(props){
+		return <svg version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enablBackground="new 0 0 100 100">
+			<path d="M80.644,87.982l16.592-41.483c0.054-0.128,0.088-0.26,0.108-0.394c0.006-0.039,0.007-0.077,0.011-0.116  c0.007-0.087,0.008-0.174,0.002-0.26c-0.003-0.046-0.007-0.091-0.014-0.137c-0.014-0.089-0.036-0.176-0.063-0.262  c-0.012-0.034-0.019-0.069-0.031-0.103c-0.047-0.118-0.106-0.229-0.178-0.335c-0.004-0.006-0.006-0.012-0.01-0.018L67.999,3.358  c-0.01-0.013-0.003-0.026-0.013-0.04L68,3.315V4c0,0-0.033,0-0.037,0c-0.403-1-1.094-1.124-1.752-0.976  c0,0.004-0.004-0.012-0.007-0.012C66.201,3.016,66.194,3,66.194,3H66.19h-0.003h-0.003h-0.004h-0.003c0,0-0.004,0-0.007,0  s-0.003-0.151-0.007-0.151L20.495,15.227c-0.025,0.007-0.046-0.019-0.071-0.011c-0.087,0.028-0.172,0.041-0.253,0.083  c-0.054,0.027-0.102,0.053-0.152,0.085c-0.051,0.033-0.101,0.061-0.147,0.099c-0.044,0.036-0.084,0.073-0.124,0.113  c-0.048,0.048-0.093,0.098-0.136,0.152c-0.03,0.039-0.059,0.076-0.085,0.117c-0.046,0.07-0.084,0.145-0.12,0.223  c-0.011,0.023-0.027,0.042-0.036,0.066L2.911,57.664C2.891,57.715,3,57.768,3,57.82v0.002c0,0.186,0,0.375,0,0.562  c0,0.004,0,0.004,0,0.008c0,0,0,0,0,0.002c0,0,0,0,0,0.004v0.004v0.002c0,0.074-0.002,0.15,0.012,0.223  C3.015,58.631,3,58.631,3,58.633c0,0.004,0,0.004,0,0.008c0,0,0,0,0,0.002c0,0,0,0,0,0.004v0.004c0,0,0,0,0,0.002v0.004  c0,0.191-0.046,0.377,0.06,0.545c0-0.002-0.03,0.004-0.03,0.004c0,0.004-0.03,0.004-0.03,0.004c0,0.002,0,0.002,0,0.002  l-0.045,0.004c0.03,0.047,0.036,0.09,0.068,0.133l29.049,37.359c0.002,0.004,0,0.006,0.002,0.01c0.002,0.002,0,0.004,0.002,0.008  c0.006,0.008,0.014,0.014,0.021,0.021c0.024,0.029,0.052,0.051,0.078,0.078c0.027,0.029,0.053,0.057,0.082,0.082  c0.03,0.027,0.055,0.062,0.086,0.088c0.026,0.02,0.057,0.033,0.084,0.053c0.04,0.027,0.081,0.053,0.123,0.076  c0.005,0.004,0.01,0.008,0.016,0.01c0.087,0.051,0.176,0.09,0.269,0.123c0.042,0.014,0.082,0.031,0.125,0.043  c0.021,0.006,0.041,0.018,0.062,0.021c0.123,0.027,0.249,0.043,0.375,0.043c0.099,0,0.202-0.012,0.304-0.027l45.669-8.303  c0.057-0.01,0.108-0.021,0.163-0.037C79.547,88.992,79.562,89,79.575,89c0.004,0,0.004,0,0.004,0c0.021,0,0.039-0.027,0.06-0.035  c0.041-0.014,0.08-0.034,0.12-0.052c0.021-0.01,0.044-0.019,0.064-0.03c0.017-0.01,0.026-0.015,0.033-0.017  c0.014-0.008,0.023-0.021,0.037-0.028c0.14-0.078,0.269-0.174,0.38-0.285c0.014-0.016,0.024-0.034,0.038-0.048  c0.109-0.119,0.201-0.252,0.271-0.398c0.006-0.01,0.016-0.018,0.021-0.029c0.004-0.008,0.008-0.017,0.011-0.026  c0.002-0.004,0.003-0.006,0.005-0.01C80.627,88.021,80.635,88.002,80.644,87.982z M77.611,84.461L48.805,66.453l32.407-25.202  L77.611,84.461z M46.817,63.709L35.863,23.542l43.818,14.608L46.817,63.709z M84.668,40.542l8.926,5.952l-11.902,29.75  L84.668,40.542z M89.128,39.446L84.53,36.38l-6.129-12.257L89.128,39.446z M79.876,34.645L37.807,20.622L65.854,6.599L79.876,34.645  z M33.268,19.107l-6.485-2.162l23.781-6.487L33.268,19.107z M21.92,18.895l8.67,2.891L10.357,47.798L21.92,18.895z M32.652,24.649  l10.845,39.757L7.351,57.178L32.652,24.649z M43.472,67.857L32.969,92.363L8.462,60.855L43.472,67.857z M46.631,69.09l27.826,17.393  l-38.263,6.959L46.631,69.09z" />
+		</svg>;
+
+	},
+
+	section : React.createClass({
+		render : function(){
+			return <div className='navSection'>
+				{this.props.children}
+			</div>
+		}
+	}),
+
 
 	left : React.createClass({
 		render : function(){
-			return <div className='COM'>
-				COM Ready!
+			return <div className='navSection'>
+				{this.props.children}
 			</div>
 		}
 	}),
 
 	right : React.createClass({
 		render : function(){
-			return <div className='COM'>
-				COM Ready!
+			return <div className='navSection'>
+				{this.props.children}
 			</div>
 		}
 	}),
 
 
-	logo : function(props){
-		return <span></span>
-
-	},
-
-
-
-
+	item : React.createClass({
+		getDefaultProps: function() {
+			return {
+				icon : null,
+				href : null,
+				onClick : function(){},
+				color : null
+			};
+		},
+		handleClick : function(){
+			this.props.onClick();
+		},
+		render : function(){
+			var classes = cx('navItem', this.props.color, this.props.className);
 
+			var icon;
+			if(this.props.icon) icon = <i className={'fa ' + this.props.icon} />;
 
+			if(this.props.href){
+				return <a href={this.props.href} className={classes} >
+					{this.props.children}
+					{icon}
+				</a>
+			}else{
+				return <div className={classes} onClick={this.handleClick}>
+					{this.props.children}
+					{icon}
+				</div>
+			}
+		}
+	}),
 
 };
 
diff --git a/shared/naturalCrit/nav/nav.less b/shared/naturalCrit/nav/nav.less
index 9b2de7f1d..b02c6031b 100644
--- a/shared/naturalCrit/nav/nav.less
+++ b/shared/naturalCrit/nav/nav.less
@@ -1,5 +1,88 @@
-nav{
-	background-color: #333;
-	min-height : 25px;
-}
 
+@font-face {
+	font-family : CodeLight;
+	src         : url('/assets/naturalCrit/logo/CODE Light.otf');
+}
+@font-face {
+	font-family : CodeBold;
+	src         : url('/assets/naturalCrit/logo/CODE Bold.otf');
+}
+nav{
+	display          : flex;
+	background-color : #333;
+	justify-content  : space-between;
+	.navSection{
+		display     : flex;
+		align-items : center;
+	}
+	.navLogo{
+		display         : block;
+		margin-top      : 0px;
+		margin-right    : 8px;
+		margin-left     : 8px;
+		color           : white;
+		text-decoration : none;
+
+		&:hover{
+			.name{ color : @orange; }
+			svg{ fill : @orange }
+		}
+
+
+		svg{
+			height       : 13px;
+			margin-right : 0.2em;
+			cursor       : pointer;
+			fill         : white;
+		}
+		span.name{
+			font-family : 'CodeLight';
+			font-size   : 15px;
+			span.crit{
+				font-family : 'CodeBold';
+			}
+			small{
+				font-family    : 'Open Sans';
+				font-size      : 0.3em;
+				font-weight    : 800;
+				text-transform : uppercase;
+			}
+		}
+	}
+	.navItem{
+		.animate(background-color);
+		padding          : 5px 8px;
+		cursor           : pointer;
+		background-color : #333;
+		font-size        : 12px;
+		color            : white;
+		text-decoration: none;
+		i{
+			margin-left : 5px;
+		}
+		&.tealLight:hover{ background-color : @tealLight };
+		&.teal:hover{ background-color : @teal };
+		&.greenLight:hover{ background-color : @greenLight };
+		&.green:hover{ background-color : @green };
+		&.blueLight:hover{ background-color : @blueLight };
+		&.blue:hover{ background-color : @blue };
+		&.purpleLight:hover{ background-color : @purpleLight };
+		&.purple:hover{ background-color : @purple };
+		&.steelLight:hover{ background-color : @steelLight };
+		&.steel:hover{ background-color : @steel };
+		&.yellowLight:hover{ background-color : @yellowLight };
+		&.yellow:hover{ background-color : @yellow };
+		&.orangeLight:hover{ background-color : @orangeLight };
+		&.orange:hover{ background-color : @orange };
+		&.redLight:hover{ background-color : @redLight };
+		&.red:hover{ background-color : @red };
+		&.silverLight:hover{ background-color : @silverLight };
+		&.silver:hover{ background-color : @silver };
+		&.greyLight:hover{ background-color : @greyLight };
+		&.grey:hover{ background-color : @grey };
+	}
+
+	.navSection + .navSection .navItem{
+		border-left : 1px solid #666;
+	}
+}
\ No newline at end of file