I'm facing an issue with material-ui drawer. I've changed the width of the drawer container which causes a a problem . The drawer remains a little inside the page and visible but I don't want to make it visible on the page while I haven't clicked the button. It might be having an issue with the transform attribute now.

So I changed it to transform: translate(350px, 0px) but then I'm getting another issue, that is if I am clicking the button the drawer is not showing up. Any help on this thing ??

I have got the solution and edited the code.

I've created a Demo here => Have a look

Also shared the code below:

index.js

import React, { Component } from 'react';

import { render } from 'react-dom';

import Hello from './Hello';

import './style.css';

import Drawer from 'material-ui/Drawer';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';



class App extends Component {

  constructor() {

    super();

    this.state = {

      openDrawer: false

    };

  }



  toggleDrawer() {

    this.setState({

      openDrawer: !this.state.openDrawer

    });

  }



  render() {

    return (

      <MuiThemeProvider>

      <div>

        <button onClick={this.toggleDrawer.bind(this)}> Toggle Drawer</button>

        <Drawer 

                  open={this.state.openDrawer}

                  containerClassName={!this.state.openDrawer? hide-drawer: show-drawer }

                  openSecondary={true}

                  docked={true} 

                >

                    <div className=drawer-title-div>

                        <h4 className=drawer-title-text>It's my drawer</h4>

                    </div>

                </Drawer>

      </div>

      </MuiThemeProvider>

    );

  }

}



render(<App />, document.getElementById('root'));

style.css

h1, p {





font-family: Lato;

}



.show-drawer {

  top: 47px !important;

  text-align: left !important;

  width: 80% !important;

  transform: translate(0%, 0px) !important;

}



.hide-drawer {

  top: 47px !important;

  text-align: left !important;

  width: 80% !important;

  transform: translate(100%, 0px) !important;

}



/* .drawer-side-drawer:focus {

  top: 47px !important;

  text-align: left !important;

  width: 350px !important;

  transform: translate(0px, 0px) !important;

} */



.drawer-title-div {

  display: inline-block;

  width: 100%;

  background: #F2F8FB;

  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.24);

}



.drawer-title-text {

  display: inline-block;

  margin-left: 16px;

  margin-top: 16px;

  margin-bottom: 16px;

  color: #484848;

  font-family: Muli;

  font-size: 16px;

  font-weight: 600;

}