Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: SideNav will not collapse on click of SideNavLink

mattagape pro asked 6 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 answered 6 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 6 years ago

I've actually been using...

mattagape pro commented 6 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 commented 6 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

  • ForumUser: 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