Apply to Edit page

client/homebrew/pages/editPage/editPage.jsx

@@ -399,12 +399,6 @@ const EditPage = createClass({
 					 this.state.brew.shareId;
 	},
 
-	handleDropdown : function(show){
-		this.setState({
-			showDropdown : show
-		});
-	},
-
 	getRedditLink : function(){
 
 		const shareLink = this.processShareId();
@@ -417,25 +411,9 @@ const EditPage = createClass({
 		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title)}&text=${encodeURIComponent(text)}`;
 	},
 
-	renderDropdown : function(){
-		if(!this.state.showDropdown) return null;
-
+	renderNavbar : function(){
 		const shareLink = this.processShareId();
 
-		return <div className='dropdown'>
-			<a href={`/share/${this.processShareId()}`} className='item'>
-				view
-			</a>
-			<a className='item' onClick={()=>{navigator.clipboard.writeText(`https://homebrewery.naturalcrit.com/share/${shareLink}`);}}>
-				copy url
-			</a>
-			<a href={`${this.getRedditLink()}`} target='_blank' rel='noopener noreferrer' className='item'>
-				post to reddit
-			</a>
-		</div>;
-	},
-
-	renderNavbar : function(){
 		return <Navbar>
 
 			{this.state.alertTrashedGoogleBrew &&
@@ -456,12 +434,20 @@ const EditPage = createClass({
 				{this.renderSaveButton()}
 				<NewBrew />
 				<ReportIssue />
-				<Nav.item color='teal' icon='fas fa-share-alt' className='share'
-					onMouseEnter={()=>this.handleDropdown(true)}
-					onMouseLeave={()=>this.handleDropdown(false)}>
-					share
-					{this.renderDropdown()}
-				</Nav.item>
+				<Nav.dropdown>
+					<Nav.item color='teal' icon='fas fa-share-alt'>
+						share
+					</Nav.item>
+					<Nav.item color='blue' href={`/share/${shareLink}`}>
+						view
+					</Nav.item>
+					<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`https://homebrewery.naturalcrit.com/share/${shareLink}`);}}>
+						copy url
+					</Nav.item>
+					<Nav.item color='blue' href={this.getRedditLink()} newTab={true} rel='noopener noreferrer'>
+						post to reddit
+					</Nav.item>
+				</Nav.dropdown>
 				<PrintLink shareId={this.processShareId()} />
 				<RecentNavItem brew={this.state.brew} storageKey='edit' />
 				<Account />

client/homebrew/pages/editPage/editPage.less

@@ -18,50 +18,6 @@
 			background-color : @red;
 		}
 	}
-	.share.navItem{
-		position : relative;
-		.dropdown{
-			position : absolute;
-			top      : 28px;
-			left     : 0px;
-			z-index  : 10000;
-			width    : 100%;
-			h4{
-				display          : block;
-				box-sizing       : border-box;
-				padding          : 5px 0px;
-				background-color : #333;
-				font-size        : 0.8em;
-				color            : #bbb;
-				text-align       : center;
-				border-top       : 1px solid #888;
-				&:nth-of-type(1){ background-color: darken(@teal, 20%); }
-				&:nth-of-type(2){ background-color: darken(@purple, 30%); }
-			}
-			.item{
-				.animate(background-color);
-				position         : relative;
-				display          : block;
-				width            : 100%;
-				padding          : 13px 5px;
-				box-sizing       : border-box;
-				background-color : #333;
-				color            : white;
-				text-decoration  : none;
-				border-top       : 1px solid #888;
-				&:hover{
-					background-color : @blue;
-				}
-				.title{
-					display       : inline-block;
-					overflow      : hidden;
-					width         : 100%;
-					text-overflow : ellipsis;
-					white-space   : nowrap;
-				}
-			}
-		}
-	}
 	.googleDriveStorage {
 		position : relative;
 	}

client/homebrew/pages/sharePage/sharePage.jsx

@@ -32,9 +32,11 @@ const SharePage = createClass({
 	componentDidMount : function() {
 		document.addEventListener('keydown', this.handleControlKeys);
 	},
+
 	componentWillUnmount : function() {
 		document.removeEventListener('keydown', this.handleControlKeys);
 	},
+
 	handleControlKeys : function(e){
 		if(!(e.ctrlKey || e.metaKey)) return;
 		const P_KEY = 80;

shared/naturalcrit/nav/nav.jsx

@@ -92,9 +92,9 @@ const Nav = {
 		},
 
 		render : function () {
-			const dropdownChildren = React.Children.map(this.props.children, (child, i) => {
+			const dropdownChildren = React.Children.map(this.props.children, (child, i)=>{
 				// Ignore the first child
-				if (i < 1) return;
+				if(i < 1) return;
 				return child;
 			});
 			return (
@@ -104,7 +104,7 @@ const Nav = {
 					{this.props.children[0]}
 					{this.renderDropdown(dropdownChildren)}
 				</div>
-			)
+			);
 		}
 	})