Added in an editable title navitem

client/homebrew/navbar/editTitle.navitem.jsx

@@ -0,0 +1,33 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+var Nav = require('naturalcrit/nav/nav.jsx');
+
+const MAX_TITLE_LENGTH = 50;
+
+
+var RedditShare = React.createClass({
+	getDefaultProps: function() {
+		return {
+			title : '',
+			onChange : function(){}
+		};
+	},
+
+	handleChange : function(e){
+		if(e.target.value.length > MAX_TITLE_LENGTH) return;
+		this.props.onChange(e.target.value);
+	},
+	render : function(){
+		return <Nav.item className='editTitle'>
+			<input type='text' value={this.props.title} onChange={this.handleChange} />
+
+			<div className={cx('charCount', {'max' : this.props.title.length >= MAX_TITLE_LENGTH})}>
+				{this.props.title.length}/{MAX_TITLE_LENGTH}
+			</div>
+		</Nav.item>
+	},
+
+});
+
+module.exports = RedditShare;

client/homebrew/navbar/navbar.less

@@ -1,19 +1,42 @@
-.homebrew nav{
 
+.homebrew nav{
 	.homebrewLogo{
 		.animate(color);
-		font-family     : CodeBold;
-		font-size: 12px;
-
+		font-family : CodeBold;
+		font-size   : 12px;
+		color       : white;
 		div{
-			margin-top: 2px;
-			margin-bottom: -2px;
+			margin-top    : 2px;
+			margin-bottom : -2px;
 		}
-
-		color : white;
 		&:hover{
 			color : @blue;
 		}
 	}
-
+	.editTitle.navItem{
+		padding : 2px 12px;
+		input{
+			margin           : 0;
+			padding          : 2px;
+			width : 250px;
+			background-color : #333;
+			font-family      : 'Open Sans', sans-serif;
+			font-size        : 12px;
+			font-weight      : 800;
+			color            : white;
+			text-align       : center;
+			border           : 1px solid @blue;
+			outline          : none;
+		}
+		.charCount{
+			display        : inline-block;
+			vertical-align : bottom;
+			margin-left    : 8px;
+			text-align     : right;
+			color : #666;
+			&.max{
+				color : @red;
+			}
+		}
+	}
 }