How to combine onClick links with drawer nav

[bingomanatee]

I am using onClick handlers in my drawer nav. What do I trigger to close the drawer?

[tleunen]

Currently, there's no easy way to that, but you could set a ref on the layout, and then call this findDOMNode(this.refs.layout).MaterialLayout.toggleDrawer()

[prasadsilva]

What did you have in mind for 2.0? Wrap the toggleDrawer call in a Drawer component method?

[tleunen]

Yep exactly. Having a prop on the drawer to open/close it.

[prasadsilva]

Cool. Just ran into this. Having trouble getting a ref to the Layout..

For this (in render): <Layout ref="layout"> I get empty object for this.refs in a click handler.

Anyone else getting this?

[prasadsilva]

Nevermind, issue was my fault. Scopes! :)

[bingomanatee]

i was also getting that issue prasadsilva reported; what was your fix?

[prasadsilva]

Scopes? Make sure the click handler is a closure with the correct 'this' object. ES5: .bind() or ES6: () => { }

[Download]

I actually rebuilt react-mdl's Drawer to be a controlled component with an open property. I also added an autoClose property that closes the drawer after a click on a nav link. It's a feature that has been requested many times on mdl.

It also has a right property to use it on the right hand side of the screen, but you may not like that part so much depending on your position on the 'holyness' of the material design guidelines, so to speak.

Also, I found that it was useful to de-couple the layout obfuscator and made it into a separate component named Modal that I reuse for Dialog (yes I re-wrote that too).

If you want to have a look at what I have currently, check it out here: https://github.com/Download/bridalapp-ui/blob/master/src/components/Mdl/mdl-extras.jsx

And to see it in action: http://www.bridalapp.net (note the button on the far right of the appbar; it opens the right drawer)

[drewbolles]

I solved this by adding a componentWillReceiveProps lifecycle method to my primary App container. It check the location pathnames and if the conditions were correct, fired the toggleDrawer method.

componentWillReceiveProps(nextProps) {
  // If our locations are different and drawer is open,
  // force a close
  if (this.props.location.pathname !== nextProps.location.pathname) {
     const layout = document.querySelector('.mdl-js-layout');
     const drawer = document.querySelector('.mdl-layout__drawer');

     if (layout.classList.contains('is-small-screen') && drawer.classList.contains('is-visible')) {
       layout.MaterialLayout.toggleDrawer();
     }
   }
}

[darrylmack]

@drewbolles This worked great! Put it in the function to navigate to different pages.