Initial functionality pass

client/homebrew/navbar/metadata.navitem.jsx

@@ -0,0 +1,71 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+
+const MetadataNav = createClass({
+	DisplayName     : 'MetadataNav',
+	getDefaultProps : function() {
+		return {
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			showDropdown : false
+		};
+	},
+
+	componentDidMount : function() {
+	},
+
+	handleDropdown : function(show){
+		this.setState({
+			showDropdown : show
+		});
+	},
+
+	getAuthors : function(){
+		if(!this.props.brew.authors) return 'No authors';
+		return this.props.brew.authors.join(', ');
+	},
+
+	getTags : function(){
+		if(!this.props.brew.tags) return 'No tags';
+		return this.props.brew.tags.join(', ');
+	},
+
+	getSystems : function(){
+		if(!this.props.brew.systems) return 'No systems';
+		return this.props.brew.systems.join(', ');
+	},
+
+	renderDropdown : function(){
+		if(!this.state.showDropdown) return null;
+
+		return <div className='dropdown'>
+			<h4>Description</h4>
+			<p>{this.props.brew.description || 'No description.'}</p>
+			<h4>Authors</h4>
+			<p>{this.getAuthors()}</p>
+			<h4>Tags</h4>
+			<p>{this.getTags()}</p>
+			<h4>Systems</h4>
+			<p>{this.getSystems()}</p>
+		</div>;
+	},
+
+	render : function(){
+		return <Nav.item icon='fas fa-info-circle' color='grey' className='metadata'
+			onMouseEnter={()=>this.handleDropdown(true)}
+			onMouseLeave={()=>this.handleDropdown(false)}>
+			METADATA
+			{this.renderDropdown()}
+		</Nav.item>;
+	}
+
+});
+
+module.exports = MetadataNav;

client/homebrew/navbar/navbar.less

@@ -163,6 +163,35 @@
 			}
 		}
 	}
+	.metadata.navItem {
+		position : relative;
+		.dropdown{
+			position   : absolute;
+			top        : 28px;
+			left       : 0px;
+			z-index    : 10000;
+			width      : 350px;
+			max-height : ~"calc(100vh - 28px)";
+			background-color : #333;
+			h4{
+				display          : block;
+				box-sizing       : border-box;
+				padding          : 5px 0px;
+				font-size        : 0.8em;
+				color            : #bbb;
+				text-align       : center;
+				border           : 1px solid #888;
+				border-left      : 0px;
+				border-right     : 0px;
+			}
+			p{
+				font-family      : 'Open Sans', sans-serif;
+				font-size        : 12px;
+				font-weight      : normal;
+				text-transform 	 : initial;
+			}
+		}
+	}
 	.warning.navItem{
 		position         : relative;
 		background-color : @orange;

client/homebrew/pages/sharePage/sharePage.jsx

@@ -5,6 +5,7 @@ const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
+const MetadataNav = require('../../navbar/metadata.navitem.jsx');
 const PrintLink = require('../../navbar/print.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const Account = require('../../navbar/account.navitem.jsx');
@@ -55,6 +56,7 @@ const SharePage = createClass({
 				</Nav.section>
 
 				<Nav.section>
+					<MetadataNav brew={this.props.brew} />
 					{this.props.brew.shareId && <>
 						<PrintLink shareId={this.processShareId()} />
 						<Nav.dropdown>