Issue#591 (#592)

* fixes #555

* fixes #591

* Update README.md

* Update examples.js

* Update examples.js

client/components/Nav.jsx

@@ -20,6 +20,16 @@ class Nav extends React.PureComponent {
     this.handleFocus = this.handleFocus.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
     this.clearHideTimeout = this.clearHideTimeout.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleClickOutside = this.handleClickOutside.bind(this);
+  }
+
+  componentWillMount() {
+    document.addEventListener('mousedown', this.handleClick, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClick, false);
   }
 
   setDropdown(dropdown) {
@@ -28,6 +38,20 @@ class Nav extends React.PureComponent {
     });
   }
 
+  handleClick(e) {
+    if (this.node.contains(e.target)) {
+      return;
+    }
+
+    this.handleClickOutside();
+  }
+
+  handleClickOutside() {
+    this.setState({
+      dropdownOpen: 'none'
+    });
+  }
+
   toggleDropdown(dropdown) {
     if (this.state.dropdownOpen === 'none') {
       this.setState({
@@ -85,7 +109,7 @@ class Nav extends React.PureComponent {
     };
     return (
       <nav className="nav" role="navigation" title="main-navigation">
-        <ul className="nav__items-left" title="project-menu">
+        <ul className="nav__items-left" title="project-menu" ref={(node) => { this.node = node; }}>
           <li className="nav__item-logo">
             <InlineSVG src={logoUrl} alt="p5.js logo" />
           </li>