From 6cdfbc87d8958058371297b185c9cf4c30147186 Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Thu, 21 Feb 2019 15:00:37 +0300
Subject: [PATCH] fix: close guide nav when guide is unmounted and close nav
 when nav clkd

---
 client/src/components/Header/index.js  | 17 +++++++++++------
 client/src/components/layouts/Guide.js | 11 ++++++++---
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Header/index.js b/client/src/components/Header/index.js
index 799439a7ea..6d5a5af357 100644
--- a/client/src/components/Header/index.js
+++ b/client/src/components/Header/index.js
@@ -42,6 +42,7 @@ class Header extends Component {
 
   componentWillUnmount() {
     document.removeEventListener('click', this.handleClickOutside);
+    console.log('header unmount');
   }
 
   toggleDisplayMenu = () => {
@@ -84,8 +85,12 @@ class Header extends Component {
       document.documentElement.clientWidth,
       window.innerWidth || 0
     );
-    console.log(viewportWidth);
-    const { disableSettings, onGuide, displayMenu } = this.props;
+    const {
+      disableSettings,
+      onGuide,
+      displayMenu,
+      toggleDisplayMenu
+    } = this.props;
     return (
       <header className={this.renderClassNames(displayMenu, onGuide)}>
         <nav id='top-nav'>
@@ -95,20 +100,20 @@ class Header extends Component {
           {disableSettings ? null : <FCCSearch />}
           {onGuide && displayMenu && viewportWidth < 991 ? null : (
             <ul id='top-right-nav'>
-              <li>
+              <li onClick={toggleDisplayMenu}>
                 <Link to='/learn'>Learn</Link>
               </li>
-              <li>
+              <li onClick={toggleDisplayMenu}>
                 <Link external={true} to='/forum'>
                   Forum
                 </Link>
               </li>
-              <li>
+              <li onClick={toggleDisplayMenu}>
                 <Link external={true} to='/news'>
                   News
                 </Link>
               </li>
-              <li className='user-state-link'>
+              <li className='user-state-link' onClick={toggleDisplayMenu}>
                 <UserState disableSettings={disableSettings} />
               </li>
             </ul>
diff --git a/client/src/components/layouts/Guide.js b/client/src/components/layouts/Guide.js
index b5ee25133a..1dbd2e64cc 100644
--- a/client/src/components/layouts/Guide.js
+++ b/client/src/components/layouts/Guide.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { StaticQuery, graphql } from 'gatsby';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-// import { createSelector } from 'reselect';
 import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
 
 import SideNav from './components/guide/SideNav';
@@ -12,8 +11,6 @@ import Spacer from '../helpers/Spacer';
 import 'prismjs/themes/prism.css';
 import './guide.css';
 
-// import { expandedState, displaySideNav } from '../../redux';
-
 import { toggleExpandedState, toggleDisplaySideNav } from './redux';
 
 const propTypes = {
@@ -32,6 +29,7 @@ const propTypes = {
       )
     })
   }),
+  displayMenu: PropTypes.bool,
   displaySideNav: PropTypes.bool,
   expandedState: PropTypes.object,
   location: PropTypes.object,
@@ -42,6 +40,7 @@ const propTypes = {
 const mapStateToProps = state => {
   return {
     expandedState: state.guideNav.expandedState,
+    displayMenu: state.guideNav.displayMenu,
     displaySideNav: state.guideNav.displaySideNav
   };
 };
@@ -57,6 +56,12 @@ class GuideLayout extends React.Component {
     this.contentRef.focus();
   };
 
+  componentWillUnmount() {
+    if (this.props.displayMenu) {
+      this.props.toggleDisplaySideNav();
+    }
+  }
+
   render() {
     let {
       displaySideNav,