fix: close guide nav when guide is unmounted and close nav when nav clkd
parent
b5b3482d0e
commit
6cdfbc87d8
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue