Shift to title wrapper

client/homebrew/navbar/metadata.navitem.jsx

@@ -14,17 +14,17 @@ const MetadataNav = createClass({
 
 	getInitialState : function() {
 		return {
-			showDropdown : false
+			showMetaWindow : false
 		};
 	},
 
 	componentDidMount : function() {
 	},
 
-	handleDropdown : function(show){
+	toggleMetaWindow : function(){
-		this.setState({
+		this.setState((prevProps)=>({
-			showDropdown : show
+			showMetaWindow : !prevProps.showMetaWindow
-		});
+		}));
 	},
 
 	getAuthors : function(){
@@ -42,8 +42,8 @@ const MetadataNav = createClass({
 		return this.props.brew.systems.join(', ');
 	},
 
-	renderDropdown : function(){
+	renderMetaWindow : function(){
-		if(!this.state.showDropdown) return null;
+		if(!this.state.showMetaWindow) return null;
 
 		return <div className='dropdown'>
 			<h4>Description</h4>
@@ -59,10 +59,9 @@ const MetadataNav = createClass({
 
 	render : function(){
 		return <Nav.item icon='fas fa-info-circle' color='grey' className='metadata'
-			onMouseEnter={()=>this.handleDropdown(true)}
+			onClick={()=>this.toggleMetaWindow()}>
-			onMouseLeave={()=>this.handleDropdown(false)}>
+			{this.props.children}
-			METADATA
+			{this.renderMetaWindow()}
-			{this.renderDropdown()}
 		</Nav.item>;
 	}
 

client/homebrew/navbar/navbar.less

@@ -28,7 +28,7 @@
 			width            : 250px;
 			margin           : 0;
 			padding          : 2px;
-			background-color : #444;
+			background-color : transparent;
 			font-family      : 'Open Sans', sans-serif;
 			font-size        : 12px;
 			font-weight      : 800;
@@ -54,6 +54,7 @@
 		color          : white;
 		text-align     : center;
 		text-transform : initial;
+		flex-grow      : 1;
 	}
 	.save-menu {
 		.dropdown {
@@ -165,12 +166,19 @@
 	}
 	.metadata.navItem {
 		position : relative;
+		padding: 0;
+		align-items: center;
+		display  : flex;
+		flex-grow: 1;
+		i{
+			margin-right: 10px;
+		}
 		.dropdown{
 			position   : absolute;
 			top        : 28px;
 			left       : 0px;
 			z-index    : 10000;
-			width      : 350px;
+			width      : 100%;
 			max-height : ~"calc(100vh - 28px)";
 			background-color : #333;
 			h4{

client/homebrew/pages/sharePage/sharePage.jsx

@@ -51,12 +51,13 @@ const SharePage = createClass({
 		return <div className='sharePage sitePage'>
 			<Meta name='robots' content='noindex, nofollow' />
 			<Navbar>
-				<Nav.section>
+				<Nav.section classes='titleSection'>
-					<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
+					<MetadataNav brew={this.props.brew}>
+						<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
+					</MetadataNav>
 				</Nav.section>
 
 				<Nav.section>
-					<MetadataNav brew={this.props.brew} />
 					{this.props.brew.shareId && <>
 						<PrintLink shareId={this.processShareId()} />
 						<Nav.dropdown>

client/homebrew/pages/sharePage/sharePage.less

@@ -1,4 +1,8 @@
 .sharePage{
+	.navContent .navSection.titleSection {
+		flex-grow: 1;
+		justify-content: center;
+	}
 	.content{
 		overflow-y : hidden;
 	}

shared/naturalcrit/nav/nav.jsx

@@ -29,7 +29,7 @@ const Nav = {
 	section : createClass({
 		displayName : 'Nav.section',
 		render      : function(){
-			return <div className='navSection'>
+			return <div className={this.props.classes ? `navSection ${this.props.classes}` : 'navSection'}>
 				{this.props.children}
 			</div>;
 		}

shared/naturalcrit/nav/nav.less

@@ -54,7 +54,7 @@ nav{
 		.animate(background-color);
 		padding          : 8px 12px;
 		cursor           : pointer;
-		background-color : #333;
+		// background-color : #333;
 		font-size        : 10px;
 		font-weight      : 800;
 		color            : white;