From 074e654b646519c67ef6aefb7227e22a89138b61 Mon Sep 17 00:00:00 2001
From: Himanshu <himichhabra14@gmail.com>
Date: Wed, 21 Feb 2018 01:02:09 +0530
Subject: [PATCH] fixes #525 (#549)

* fixes #525

On clicking on the links itself, the menu can be closed.

* fixes #525

Account click added.
---
 client/components/Nav.jsx | 35 +++++++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 87740c7f..d48e62e8 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -99,10 +99,13 @@ class Nav extends React.PureComponent {
               <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
-              <li className="nav__dropdown-heading">
+              <button
+                onClick={this.toggleDropdown.bind(this, 'file')}
+                className="nav__dropdown-heading"
+              >
                 <span>File</span>
                 <InlineSVG src={triangleUrl} />
-              </li>
+              </button>
               <li className="nav__dropdown-item">
                 <button
                   onClick={() => {
@@ -210,10 +213,13 @@ class Nav extends React.PureComponent {
               <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
-              <li className="nav__dropdown-heading">
+              <button
+                onClick={this.toggleDropdown.bind(this, 'edit')}
+                className="nav__dropdown-heading"
+              >
                 <span>Edit</span>
                 <InlineSVG src={triangleUrl} />
-              </li>
+              </button>
               <li className="nav__dropdown-item">
                 <button
                   onClick={() => {
@@ -278,10 +284,13 @@ class Nav extends React.PureComponent {
               <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
-              <li className="nav__dropdown-heading">
+              <button
+                onClick={this.toggleDropdown.bind(this, 'sketch')}
+                className="nav__dropdown-heading"
+              >
                 <span>Sketch</span>
                 <InlineSVG src={triangleUrl} />
-              </li>
+              </button>
               <li className="nav__dropdown-item">
                 <button
                   onClick={() => {
@@ -346,10 +355,13 @@ class Nav extends React.PureComponent {
               <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
-              <li className="nav__dropdown-heading">
+              <button
+                onClick={this.toggleDropdown.bind(this, 'help')}
+                className="nav__dropdown-heading"
+              >
                 <span>Help & Feedback</span>
                 <InlineSVG src={triangleUrl} />
-              </li>
+              </button>
               <li className="nav__dropdown-item">
                 <button
                   onClick={() => {
@@ -420,10 +432,13 @@ class Nav extends React.PureComponent {
               </button>
               <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
               <ul className="nav__dropdown">
-                <li className="nav__dropdown-heading">
+                <button
+                  onClick={this.toggleDropdown.bind(this, 'account')}
+                  className="nav__dropdown-heading"
+                >
                   <span>My Account</span>
                   <InlineSVG src={triangleUrl} />
-                </li>
+                </button>
                 <li className="nav__dropdown-item">
                   <Link
                     to={`/${this.props.user.username}/sketches`}