Help dropdown uses existing dropdown class. Small tweaks.

client/homebrew/navbar/help.navitem.jsx

@@ -4,46 +4,22 @@ const _ = require('lodash');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 
-const Help = createClass({
+module.exports = function(props){
-
+	return <Nav.dropdown>
-	getInitialState : function() {
+		<Nav.item color='grey' icon='fas fa-question-circle'>
-		return {
+			need help?
-			showDropdown : false
+		</Nav.item>
-		};
+		<Nav.item color='red' icon='fas fa-fw fa-bug'
-	},
+			href={`https://www.reddit.com/r/homebrewery/submit?selftext=true&title=${encodeURIComponent('[Issue] Describe Your Issue Here')}`}
-
+			newTab={true}
-	handleDropdown : function(show){
+			rel='noopener noreferrer'>
-		this.setState({
+			report issue
-			showDropdown : show
+		</Nav.item>
-		});
+		<Nav.item color='blue' icon='fas fa-fw fa-file-import'
-	},
+			href='/migrate'
-
+			newTab={true}
-	renderDropdown : function(){
+			rel='noopener noreferrer'>
-		return !this.state.showDropdown ? null : <div className='dropdown'>
+			migrate
-			<a href={`https://www.reddit.com/r/homebrewery/submit?selftext=true&title=${encodeURIComponent('[Issue] Describe Your Issue Here')}`}
+		</Nav.item>
-				className='item red'
+	</Nav.dropdown>;
-				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/navbar.less

@@ -68,8 +68,7 @@
 			color: pink;
 		}
 	}
-	.recent.navItem,
+	.recent.navItem {
-	.help.navItem{
 		position : relative;
 		.dropdown{
 			position   : absolute;
@@ -97,7 +96,7 @@
 				position         : relative;
 				display          : block;
 				box-sizing       : border-box;
-				padding          : 13px 5px;
+				padding          : 8px 5px 13px;
 				background-color : #333;
 				color            : white;
 				text-decoration  : none;
@@ -106,14 +105,11 @@
 					background-color : @blue;
 				}
 				.title{
+					display       : inline-block;
 					overflow      : hidden;
 					width         : 100%;
 					text-overflow : ellipsis;
 					white-space   : nowrap;
-
-					i{
-						float: right;
-					}
 				}
 				.time{
 					position  : absolute;

shared/naturalcrit/nav/nav.less

@@ -60,9 +60,11 @@ nav{
 		color            : white;
 		text-decoration  : none;
 		text-transform   : uppercase;
+		line-height      : 13px;
 		i{
 			margin-left : 5px;
 			font-size   : 13px;
+			float       : right;
 		}
 	}
 	.navSection:last-child .navItem{