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; }
Advertisement
Answer
You can try adding a toggle class and you can get rid of the transform.
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 containerClassName={!this.state.openDrawer ? "hide-drawer": "show-drawer"} open={this.state.openDrawer} 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'));