CODEWITHSUNDEEP
javascriptreactjsreact-router
Max T
Max T

Reputation: 1455

React Mobile navigation doesn't collapse after click

I have a mobile navigation bar that appears at a certain breakpoint. If the button MENU is clicked, the menu appears and the button changes to CLOSE. Then clicking on CLOSE collapses the menu and the button is back to MENU. However when I click on the navigation routes the menu stays open. How do I add a conditional here to close the menu when nav buttons are clicked?

var MobileMenu = React.createClass({
  getDefaultProps: function(){
    return {
        isOpen: false
    };
  },
  openForm: function(){
        window.open('http://localhost:8080.com/form', '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes')
    },
  render: function(){
    if (this.props.isOpen){
    return (
        <div className="navMenuButtons">
          <NavLink to="/" className="navMenuButton">HOME</NavLink>
          <NavLink to="/about" className="navMenuButton">ABOUT</NavLink>
          <NavLink to="/faq" className="navMenuButton">FAQ</NavLink>
          <div className="margin-auto">
            <NavLink className="navButton applyButton" onClick={this.openForm}>
             APPLY
            </NavLink>
          </div>
        </div>
    )
  }
    return null;
  }
});

var NavBar = React.createClass({
  getInitialState: function()
        {
            return {
                isOpen: false
            };
        },
      toggleMenu: function(){
      this.setState({isOpen: !this.state.isOpen});
    },
      openForm: function(){
            window.open('http://localhost:8080/form', '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes')
        },
  render: function(){
      var mobileMenuClass = this.state.isOpen ? 'navBar navBarOpen cl-effect-21' : 'navBarClose navBar cl-effect-21';
      var mobileButton = this.state.isOpen ? 'CLOSE' : 'MENU';

      return (
        <div>
            <div className={mobileMenuClass}>

            <a href="#" className="mobile_toggle">
              <div className="toggle_labels">
                <div onClick={this.toggleMenu}className="menu navButton">{mobileButton}</div>
              </div>
            </a>
          <div className="navMenuButtons_desk">
            <NavLink to="/" className="navMenuButton">HOME</NavLink>
            <NavLink to="/about" className="navMenuButton">ABOUT</NavLink>
            <NavLink to="/faq" className="navMenuButton">FAQ</NavLink>
            <div className="button_right">
              <NavLink target="_blank" className="navButton applyButton" ><div onClick={this.openForm}>
                APPLY</div>
              </NavLink>
            </div>
          </div>
          <MobileMenu isOpen={this.state.isOpen} />
          </div>

        </div>
      );
    }
});




var App = React.createClass({

  render: function(){
    console.log(this.props.location.pathname);
    const location = this.props.location;
    return (
      <div>
        <NavBar />
        { this.props.children }
        <Footer />
      </div>
    );
  }
});

Upvotes: 0

Views: 1325

Answers (1)

Paul S
Paul S

Reputation: 36787

Your <NavLink> components should set the isOpen state to false. You should pass them a function to do this. Something along the lines of this:

var NavBar = React.createClass({
  closeMenu: function() {
    this.setState({ isOpen: false })
  }

  render() {
    return (
      <div>
        <NavLink to="/" onClick={this.closeMenu}>HOME</NavLink>
      </div>
    )
  }
})

And then modify your <NavLink> to pass the onClick prop to the <Link>

var NavLink = React.createClass({
  render() {
    const { to, onClick, children } = this.props
    return <Link to={to} onClick={onClick}>{children}</Link>
  }
})

Upvotes: 3

Related Questions