From 41fd31e6a577c7e74dc6ee264d7741a1b1553f97 Mon Sep 17 00:00:00 2001
From: Himanshu <himichhabra14@gmail.com>
Date: Fri, 9 Mar 2018 03:04:21 +0530
Subject: [PATCH] Issue#591 (#592)

* fixes #555

* fixes #591

* Update README.md

* Update examples.js

* Update examples.js
---
 client/components/Nav.jsx | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index d48e62e8..0a2b3746 100644
--- a/client/components/Nav.jsx
+++ b/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>