Initial functionality pass

shared/naturalcrit/nav/nav.jsx

@@ -80,23 +80,29 @@ const Nav = {
 		},
 		getInitialState : function() {
 			return {
-				showDropdown : false
+				showFromClick : false,
+				showDropdown  : false
 			};
 		},
 		componentDidMount : function() {
-			if(this.props.trigger == 'click')
-				document.addEventListener('click', this.handleClickOutside);
+			document.addEventListener('click', this.handleClickOutside);
 		},
 		componentWillUnmount : function() {
-			if(this.props.trigger == 'click')
-				document.removeEventListener('click', this.handleClickOutside);
+			document.removeEventListener('click', this.handleClickOutside);
 		},
 		handleClickOutside : function(e){
 			// Close dropdown when clicked outside
 			if(this.refs.dropdown && !this.refs.dropdown.contains(e.target)) {
-				this.handleDropdown(false);
+				this.handleClickInside(false);
 			}
 		},
+		handleClickInside : function(state){
+			const newState = state != undefined ? state : !this.state.showFromClick;
+			this.setState({
+				showFromClick : newState
+			});
+			this.handleDropdown(newState);
+		},
 		handleDropdown : function(show){
 			this.setState({
 				showDropdown : show
@@ -121,8 +127,9 @@ const Nav = {
 				<div className={`navDropdownContainer ${this.props.className}`}
 					ref='dropdown'
 					onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined}
-					onClick=     {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}
-					onMouseLeave={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(false);} : undefined}>
+					onClick=     {()=>this.handleClickInside()}
+					onMouseLeave={this.props.trigger == 'hover' && !this.state.showFromClick ? ()=>{this.handleDropdown(false);} : undefined}
+				>
 					{this.props.children[0] || this.props.children /*children is not an array when only one child*/}
 					{this.renderDropdown(dropdownChildren)}
 				</div>