[Drawer] Dock when screen is big enough

[killfill]

Hi!

It would be awesome to add a behaviour to the Leftnav, so when the screen is big enough, it shows docked, and when it shrinks it get undocked.

The idea is to hide the AppBar menu icon button when its docked as well.
The left-margin of the app content, could be set by plain media query.

Just like i.e. material.angularjs.org

Thanks!!

[killfill]

Dont know if this helps, but maybe can be done with window.matchMedia

Or maybe using one of these:
https://www.npmjs.com/package/react-mediaswitch
https://www.npmjs.com/package/react-responsive

[antilect]

+1

I need this functionality for my application. Is it something that's going to be implemented?

[antilect]

What I'm looking for is the option for a "Persistent" AppBar, from Material's style-guide (scroll down).
https://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-behavior

[travischoma]

+1. I tried updating the docked prop on resize, but the component doesn't re-render.

[cgestes]

@travischoma did you try setState({open: true}) ?

[joebandenburg]

+1

It is possible to build this behaviour on top of LeftNav. Check out my gist.

[josechavezm]

was this added? material-ui.com has this, how does it do it?

[alitaheri]

@hiei189 The docs site handles it's own logic.

@callemall/material-ui Guys do you think we should add an example for this or just leave it to the user to handle?

[nathanmarks]

@alitaheri Until we have a lib-wide system for handling this sort of thing, I think we should leave it to the user rather than promote a suggested way that won't be compatible with any built-in responsive enhancements later on.

[alitaheri]

You have a good point 👍

[nathanmarks]

Refer to #3614 for a discussion on adding responsive component + layout support to the lib

[petergzc]

here is an example showing how to allow a react component to listen to the media query event provided by javascript by rooting the function in the lifecycle function "ComponentWillMount()", would be a nice reference for you guys

example from react-sidebar