How do I create a responsive sidebar component using React's Material UI?

Question

I am trying to create responsive side bar using react material design but couldn't find a way to do it.

The page content should be responsive when the sidebar opens, and the sidebar should not overlay on the page content.

It should look like https://blackrockdigital.github.io/startbootstrap-simple-sidebar/.

The code so far is:

import React from 'react';
    import Drawer from 'material-ui/Drawer';
    import AppBar from 'material-ui/AppBar';
    import RaisedButton from 'material-ui/RaisedButton';
    import Layout from 'material-ui/RaisedButton';

    export default class DrawerOpenRightExample extends React.Component {

        constructor(props) {
            super(props);
            this.state = {open: false};
        }

        handleToggle(){
            this.setState({open: !this.state.open});
        }

        render() {

            return (
                <div>
                    <container>
                    //will have a form here

                    <RaisedButton
                        label="Toggle Drawer"
                        onTouchTap={this.handleToggle.bind(this)}
                    />
                    </container>
                    <Drawer width={400} openSecondary={true} open={this.state.open} >
                        <AppBar title="AppBar" />
                    </Drawer>
                </div>
            );
        }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

Material ui drawer doesn't really support this feature. You can checkout this issue #4752 on material ui repo where someone has implemented this functionality through css. https://github.com/callemall/material-ui/issues/4752