SideNav will not collapse on click of SideNavLink


Topic: SideNav will not collapse on click of SideNavLink

mattagape pro asked 4 years ago

Hello, I looked at How to close SideNav after selecting an SideNavLink ...but I am still not able to close SideNav when selecting a SideNavLink. With my SideNavLink, I invoke closeRightSideNav ...
  closeRightSideNav = () => {
    this.setState({
      isRightOpen: false
    })
  }
...this way...
<SideNavLink onClick={this.closeRightSideNav} to="business">Business</SideNavLink>
...but even though that method is invoked onClick, and the state of isRightOpen is toggled to false, the <SideNav> will not collapse I'm a bit confused about the isOpen prop for SideNav.  Any help on this would be much appreciated.

                                                                    

Jakub Mandra staff premium answered 4 years ago

Hello Matt, Your SideNav should have triggerOpening prop passed, like this:  
<SideNav triggerOpening={this.state.isRightOpen}>
  This boolean property determines if SideNav is closed or open. Docs: https://mdbootstrap.com/react/advanced/sidenav/   Best regards, Jakub

mattagape pro commented 4 years ago

I've actually been using...

mattagape pro commented 4 years ago

I'd meant to say,.. I've actually been using... SideNav hidden triggerOpening={this.props.isOpen} className="side-nav-light" breakWidth={1300}

Jakub Mandra staff premium commented 4 years ago

The only thing I deduced from description of the problem is that you do not use isRightOpen, but isOpen, inside triggerOpening. You have to use the variable which you have in state. SideNav needs boolean variable assignet to triggerOpening. Regards

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: Mac Book Pro
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: Yes
  • Provided link: Yes