Making Sidebar with material-ui

I'm not sure if Material Design has changed since this was posted but I think OP is describing "Persistent" Drawer which is defined in the spec. Look under "Behavior". However, material-ui doesn't provide a persistent drawer.

Here's a decent work around using the current material-ui drawer by pushing the content to the right the same width as the drawer.

How to get Material-UI Drawer to 'squeeze' other content when open


This can be accomplished with the new version of Material-UI.

Check this demos out.

The behavior is described in the Material specification under the "Persistent" heading.

The mentioned version of Material-UI is v1.0.0-beta.38. So far I noticed it very stable.


This is by design. "Material Design", that is :)

https://material.io/archive/guidelines/patterns/navigation-drawer.html

What you're asking for would no longer be a drawer, as described by the Material Design spec. Material-ui attempts to follow that spec faithfully.

You will probably have to create your own component, because I don't think you'll be able to sufficiently manipulate the markup and inline CSS rendered by the Drawer component to accomplish what you're looking for.