Working dropdown component on the Share Page

shared/naturalcrit/nav/nav.jsx

@@ -68,6 +68,46 @@ const Nav = {
 		}
 	}),
 
+	dropdown : createClass({
+		getInitialState : function() {
+			return {
+				showDropdown : false
+			};
+		},
+
+		handleDropdown : function(show){
+			this.setState({
+				showDropdown : show
+			});
+		},
+
+		renderDropdown : function(dropdownChildren){
+			if(!this.state.showDropdown) return null;
+
+			return (
+				<div className='navDropdown'>
+					{dropdownChildren}
+				</div>
+			);
+		},
+
+		render : function () {
+			const dropdownChildren = React.Children.map(this.props.children, (child, i) => {
+				// Ignore the first child
+				if (i < 1) return;
+				return child;
+			});
+			return (
+				<div className='navDropdownContainer'
+					onMouseEnter={()=>this.handleDropdown(true)}
+					onMouseLeave={()=>this.handleDropdown(false)}>
+					{this.props.children[0]}
+					{this.renderDropdown(dropdownChildren)}
+				</div>
+			)
+		}
+	})
+
 };
 
 

shared/naturalcrit/nav/nav.less

@@ -78,4 +78,23 @@ nav{
 	.navSection:last-child .navItem{
 		border-left : 1px solid #666;
 	}
+	.navDropdownContainer{
+		position: relative;
+		.navDropdown {
+			position : absolute;
+			top      : 28px;
+			left     : 0px;
+			z-index  : 10000;
+			width    : 100%;
+			.navItem{
+				position         : relative;
+				display          : block;
+				width            : 100%;
+				vertical-align   : middle;
+				padding          : 8px 5px;
+				border           : 1px solid #888;
+				border-bottom    : 0;
+			}
+		}
+	}
 }