Add color mixins, help dropdown, and remove unused nav items

client/homebrew/navbar/help.navitem.jsx

@@ -0,0 +1,49 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+const Help = createClass({
+
+	getInitialState : function() {
+		return {
+			showDropdown : false
+		};
+	},
+
+	handleDropdown : function(show){
+		this.setState({
+			showDropdown : show
+		});
+	},
+
+	renderDropdown : function(){
+		return !this.state.showDropdown ? null : <div className='dropdown'>
+			<a href={`https://www.reddit.com/r/homebrewery/submit?selftext=true&title=${encodeURIComponent('[Issue] Describe Your Issue Here')}`}
+				className='item red'
+				target='_blank'
+				rel='noopener noreferrer'>
+				<span className='title'>report issue <i className='fas fa-fw fa-bug'/></span>
+			</a>
+			<a href='/migrate'
+				className='item blue'
+				target='_blank'
+				rel='noopener noreferrer'>
+				<span className='title'>migrate <i className='fas fa-fw fa-route'/></span>
+			</a>
+		</div>;
+	},
+
+	render : function(){
+		return <Nav.item icon='fas fa-life-ring' color='grey' className='recent'
+			onMouseEnter={()=>this.handleDropdown(true)}
+			onMouseLeave={()=>this.handleDropdown(false)}>
+			Need Help?
+			{this.renderDropdown()}
+		</Nav.item>;
+	}
+
+});
+
+module.exports = Help;

client/homebrew/navbar/issue.navitem.jsx

@@ -1,13 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-module.exports = function(props){
-	return <Nav.item
-		newTab={true}
-		color='red'
-		icon='fas fa-bug'
-		href={`https://www.reddit.com/r/homebrewery/submit?selftext=true&title=${encodeURIComponent('[Issue] Describe Your Issue Here')}`} >
-		report issue
-	</Nav.item>;
-};

client/homebrew/navbar/migrate.navitem.jsx

@@ -1,13 +0,0 @@
-const React = require('react');
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-module.exports = function(props){
-	return <Nav.item
-		className='migrate'
-		newTab={false}
-		href='/migrate'
-		color='blue'
-		icon='fas fa-route'>
-		migrate
-	</Nav.item>;
-};

client/homebrew/navbar/navbar.less

@@ -1,3 +1,4 @@
+@import 'naturalcrit/styles/colors.less';
 @navbarHeight : 28px;
 @keyframes pinkColoring {
 	//from {color: white;}
@@ -67,17 +68,17 @@
 			color: pink;
 		}
 	}
-	.migrate.navItem{
-		border-right : 1px solid #666;
-	}
-	.recent.navItem{
+	.recent.navItem,
+	.help.navItem{
 		position : relative;
 		.dropdown{
-			position : absolute;
-			top      : 28px;
-			left     : 0px;
-			z-index  : 10000;
-			width    : 100%;
+			position   : absolute;
+			top        : 28px;
+			left       : 0px;
+			z-index    : 10000;
+			width      : 100%;
+			overflow   : hidden auto;
+			max-height : ~"calc(100vh - 28px)";
 			h4{
 				display          : block;
 				box-sizing       : border-box;
@@ -91,6 +92,7 @@
 				&:nth-of-type(2){ background-color: darken(@purple, 30%); }
 			}
 			.item{
+				#backgroundColors;
 				.animate(background-color);
 				position         : relative;
 				display          : block;
@@ -104,11 +106,14 @@
 					background-color : @blue;
 				}
 				.title{
-					display       : inline-block;
 					overflow      : hidden;
 					width         : 100%;
 					text-overflow : ellipsis;
 					white-space   : nowrap;
+
+					i{
+						float: right;
+					}
 				}
 				.time{
 					position  : absolute;

client/homebrew/navbar/recent.navitem.jsx

@@ -123,8 +123,8 @@ const RecentItems = createClass({
 		if(!this.state.showDropdown) return null;
 
 		const makeItems = (brews)=>{
-			return _.map(brews, (brew)=>{
-				return <a href={brew.url} className='item' key={brew.id} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
+			return _.map(brews, (brew, i)=>{
+				return <a href={brew.url} className='item' key={`${brew.id}-${i}`} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
 					<span className='title'>{brew.title || '[ no title ]'}</span>
 					<span className='time'>{Moment(brew.ts).fromNow()}</span>
 				</a>;