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 /.

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=".1.0/react.min.js"></script>
<script src=".1.0/react-dom.min.js"></script>

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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

• javascript
• reactjs
• material-ui
• refluxjs

Share Improve this question Follow edited May 6, 2017 at 19:17 rishi kilaru asked May 6, 2017 at 15:27 rishi kilarurishi kilaru 3511 gold badge11 silver badge77 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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./callemall/material-ui/issues/4752

in the ponent:

export default class sidebar3 extends React.Component {

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

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

render() {
    const styles = {
            block: {
                maxWidth: 250,
            },
            toggle: {
                marginBottom: 16,
            },
            thumbOff: {
                backgroundColor: '#ffcccc',
            },
            trackOff: {
                backgroundColor: '#ff9d9d',
            },
            thumbSwitched: {
                backgroundColor: 'red',
            },
            trackSwitched: {
                backgroundColor: '#ff9d9d',
            },
            labelStyle: {
                color: 'red',
            }

    };

    return (
        <div>

            <Drawer width={'30%'}  open={this.state.open} openSecondary={true}  containerStyle={{top:'50px'}} zDepth={5}>

            <TabsExampleSimple/>

            </Drawer>
            <div className={classnames('overlayContainer', {'expanded': this.state.open})}>
                <RaisedButton
                    label="Toggle Drawer"
                    onTouchTap={this.handleToggle.bind(this)}
                />
                <Toggle
                    label="Label on the right"
                    labelPosition="right"
                    style={styles.toggle}
                    defaultToggled={true}
                    onToggle={this.handleToggle.bind(this)}

                />
                <ponent1/>
                <ponent2/>
            </div>
        </div>
    );
}

and in the project css

    .overlayContainer{
    -moz-transition: all 218ms cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 218ms cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: all 218ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 218ms cubic-bezier(0.4, 0, 0.2, 1);
    left: 0;
    right:0;
    width: auto !important;
    position: fixed !important;
   }

   .overlayContainer.expanded{
    right: 32%;
   }

My solution to this problem was adding margin based on drawer open state. Also checking viewport width, so content doesn't get squished on small devices.

state = {
    isOpen: true,
    backdrop: false
};

contentStyle() {
    return {
        marginLeft: this.state.isOpen && this.isDocked()
            ? '256px'
            : '0px',
        transition: '0.3s'
    }
}

isDocked() {
    return window.innerWidth > 500
}

toggle() {
    this.setState({isOpen: !this.state.isOpen})
}

render() {
    return (
        <div>
            <SideMenu
                isOpen={this.state.isOpen}
                toggle={() => this.toggle()}
                isDocked={this.isDocked()}
            />
            <div style={this.contentStyle()}>
                <Navbar toggle={() => this.toggle()} />
            </div>
        </div>
    )
}

You can use JavaScript inbuilt method onresize.

Check the link how I did.

Check this out. Using javascript inbuilt onresize method Open the code output in new window and check the responsivness.

https://codesandbox.io/s/material-demo-7ku79