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{
+	.recent.navItem,
-		border-right : 1px solid #666;
+	.help.navItem{
-	}
-	.recent.navItem{
 		position : relative;
 		.dropdown{
-			position : absolute;
+			position   : absolute;
-			top      : 28px;
+			top        : 28px;
-			left     : 0px;
+			left       : 0px;
-			z-index  : 10000;
+			z-index    : 10000;
-			width    : 100%;
+			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 _.map(brews, (brew, i)=>{
-				return <a href={brew.url} className='item' key={brew.id} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
+				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>;

client/homebrew/pages/editPage/editPage.jsx

@@ -10,7 +10,7 @@ const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
-const ReportIssue = require('../../navbar/issue.navitem.jsx');
+const HelpNavItem = require('../../navbar/help.navitem.jsx');
 const PrintLink = require('../../navbar/print.navitem.jsx');
 const Account = require('../../navbar/account.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
@@ -23,7 +23,6 @@ const Markdown = require('naturalcrit/markdown.js');
 
 const googleDriveActive = require('../../googleDrive.png');
 const googleDriveInactive = require('../../googleDriveMono.png');
-const MigrateNavItem = require('../../navbar/migrate.navitem.jsx');
 
 const SAVE_TIMEOUT = 3000;
 
@@ -434,8 +433,7 @@ const EditPage = createClass({
 				{this.renderGoogleDriveIcon()}
 				{this.renderSaveButton()}
 				<NewBrew />
-				<MigrateNavItem />
+				<HelpNavItem/>
-				<ReportIssue />
 				<Nav.dropdown>
 					<Nav.item color='teal' icon='fas fa-share-alt'>
 						share

client/homebrew/pages/errorPage/errorPage.jsx

@@ -7,11 +7,10 @@ const cx = require('classnames');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const PatreonNavItem = require('../../navbar/patreon.navitem.jsx');
-const IssueNavItem = require('../../navbar/issue.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
+const HelpNavItem = require('../../navbar/help.navitem.jsx');
 
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
-const MigrateNavItem = require('../../navbar/migrate.navitem.jsx');
 
 const ErrorPage = createClass({
 	getDefaultProps : function() {
@@ -34,8 +33,7 @@ const ErrorPage = createClass({
 
 				<Nav.section>
 					<PatreonNavItem />
-					<MigrateNavItem />
+					<HelpNavItem />
-					<IssueNavItem />
 					<RecentNavItem />
 				</Nav.section>
 			</Navbar>

client/homebrew/pages/homePage/homePage.jsx

@@ -9,8 +9,7 @@ const { Meta } = require('vitreum/headtags');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const NewBrewItem = require('../../navbar/newbrew.navitem.jsx');
-const IssueNavItem = require('../../navbar/issue.navitem.jsx');
+const HelpNavItem = require('../../navbar/help.navitem.jsx');
-const MigrateNavItem = require('../../navbar/migrate.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const AccountNavItem = require('../../navbar/account.navitem.jsx');
 
@@ -59,8 +58,7 @@ const HomePage = createClass({
 		return <Navbar ver={this.props.ver}>
 			<Nav.section>
 				<NewBrewItem />
-				<MigrateNavItem />
+				<HelpNavItem />
-				<IssueNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>

client/homebrew/pages/newPage/newPage.jsx

@@ -11,12 +11,11 @@ const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const AccountNavItem = require('../../navbar/account.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const IssueNavItem = require('../../navbar/issue.navitem.jsx');
+const HelpNavItem = require('../../navbar/help.navitem.jsx');
 
 const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
-const MigrateNavItem = require('../../navbar/migrate.navitem.jsx');
 
 const BREWKEY = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
@@ -291,8 +290,7 @@ const NewPage = createClass({
 			<Nav.section>
 				{this.renderSaveButton()}
 				{this.renderLocalPrintButton()}
-				<MigrateNavItem />
+				<HelpNavItem />
-				<IssueNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>

client/homebrew/pages/userPage/userPage.jsx

@@ -13,7 +13,7 @@ const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const Account = require('../../navbar/account.navitem.jsx');
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
 const BrewItem = require('./brewItem/brewItem.jsx');
-const ReportIssue = require('../../navbar/issue.navitem.jsx');
+const HelpNavItem = require('../../navbar/help.navitem.jsx');
 
 // const brew = {
 // 	title   : 'SUPER Long title woah now',
@@ -163,7 +163,7 @@ const UserPage = createClass({
 			<Navbar>
 				<Nav.section>
 					<NewBrew />
-					<ReportIssue />
+					<HelpNavItem />
 					<RecentNavItem />
 					<Account />
 				</Nav.section>

shared/naturalcrit/nav/nav.less

@@ -1,3 +1,4 @@
+@import '../styles/colors';
 @keyframes glideDropDown {
 	0%   {transform : translate(0px, -100%);
 				opacity   : 0;
@@ -49,6 +50,7 @@ nav{
 		}
 	}
 	.navItem{
+		#backgroundColors;
 		.animate(background-color);
 		padding          : 8px 12px;
 		cursor           : pointer;
@@ -62,26 +64,6 @@ nav{
 			margin-left : 5px;
 			font-size   : 13px;
 		}
-		&.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:last-child .navItem{
 		border-left : 1px solid #666;

shared/naturalcrit/styles/colors.less

@@ -20,4 +20,27 @@
 @silverLight : #ECF0F1;
 @silver      : #BDC3C7;
 @greyLight   : #95A5A6;
-@grey        : #7F8C8D;
+@grey        : #7F8C8D;
+
+#backgroundColors {
+  &.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 };
+}