SideNav - make it hidden upon selection of item - Material Design for Bootstrap

Topic: SideNav - make it hidden upon selection of item

mattagape pro asked 6 years ago

In this question I had asked about how to collapse <SideNav> once a bullet item on it is selected. My <SideNav> looks like this...

<SideNav hidden triggerOpening={this.props.isOpen} className="side-nav-light" breakWidth={1300}>

As you can see, I have set up my triggerOpening attribute to indicate whether my prop (in this case) of isOpen is true or false. I have set up a callback in <SideNavLink> like this...

<SideNavLink to="business" onClick={this.props.handleToggleClick}>Business</SideNavLink>

The callback looks like this...

handleToggleClick = () => {
  this.setState({
    isOpen: !this.state.isOpen,
  })
  console.log(this.state.isOpen)
}

In my console.log I can see that the boolean toggles from true to false or vice versa whenever I click the business bullet item. But unfortunately, even when this.state.isOpen toggles to false, the <SideNav> does not collapse. (I do successfully navigate to the business page though.) Can you tell me what I am missing on this...? When I do open the <SideNav> (make it visible), the rest of the screen is greyed out. When I click on the greyed out part of the screen the <SideNav> becomes hidden -- which is the same functionality I want for the bullet. I would like to know how to implement that functionality (of making <SideNav> hidden) into my code (my callback??) so that when I click on the business bullet item, the <SideNav> will disappear. Thanks so much for your help.

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Hi there, mattagape, Thanks for reaching out! So, the first thing I note is prop word both in trigger and on event handler on SideNavLink. Does it mean you are defining them somewhere above, meaning in a parent component to the component in which the SideNav is used? If it all is happening in the same component, neither of these are provided by the props object. SideNavCat is where the open-hide logic is defined - there should be no need to define its triggering mechanisms or the boolean value binding. Have you tried out the code in our MDB React SideNav Docs? Fiddling with it and pushing a bit the way you want your component to be should reveal the culprit in no time. With Best Regards, Kuba

mattagape pro commented 6 years ago

Hi Kuba, thanks for writing. Regarding prop, yes, I am defining them in a parent Component. Yes, I have looked through the Docs. When you say that the open-hide logic is defined in SideNavCat, do you mean for the entire component? Will it hide that entire component? I've tried out the code in the 'Docs' with this modification: I've replaced... For bloggers ...with... Business I have also removed the component, because I am using the Gatsby.js framework which already provides routing. I do actually Navigate to /business when I click that link (so Routing works), but still remains open (not hidden).

mattagape pro commented 6 years ago

When I say 'entire component', I mean the entire SideNav component.

mattagape pro commented 6 years ago

I'm having some trouble with your commenting section's code formatting -- it deletes the code that I put in between HTML arrow symbols. Here is what I'd meant to say... I've replaced... SideNavLink... For bloggers ...with... SideNavLink to="/business" ...Business

mattagape pro commented 6 years ago

I added a "to=" to SideNavLink.

Add comment

mattagape pro answered 6 years ago

0 0 Best answer

Hi Kuba, thanks for writing. (Please disregard my comments below your answer. I'm writing my response to you here instead because this allows me to do code formatting.) Regarding prop, yes, I am defining them in a parent Component. Yes, I have looked through the Docs. When you say that the open-hide logic is defined in SideNavCat, do you mean for the entire <SideNav> component? Will it hide that entire <SideNav> component? I've tried out the code in the 'Docs' with this modification: I've replaced...

<SideNavLink>For bloggers</SideNavLink>

...with...

<SideNavLink to="/business">Business</SideNavLink>

I have also removed the <Route> component, because I am using the Gatsby.js framework which already provides routing. I do actually Navigate to /business when I click /business (so Routing works), but <SideNav> still remains open (not hidden).

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Hi, I think I finally understood - there is a functionality of passing in a callback to onClick of SideNavLink, that'd be toggling the triggering Boolean. It looks like there is no way of passing it to the SideNavLink as of now, but fear not, seems relatively easy to implement and should be there soon. Adding to the TODO board as of now. Best, Kuba

mattagape pro commented 6 years ago

Okay, I appreciate it. Looking forward to seeing the update. I did a bit of a hack by using this callback with onClick... removeSideNav() { const sidenav = document.getElementById("sidenavig"); const overlay = document.getElementById("sidenav-overlay"); sidenav.style.display = 'none'; overlay.style.display = 'none'; }

Jakub Strebeyko staff commented 6 years ago

Sweet hack, thanks! May it serve as reference for people until it gets sorted out. Cheers, Kuba

Add comment

Write

Create snippet

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
Browser: Chrome
OS: OSX
Provided sample code: Yes
Provided link: Yes

mattagape

Pro User

50Support score
7Questions 2Answers

0Snippets likes 0Snippets