react-toolbox/components/drawer

Drawer

The navigation drawer slides in from the left. It is a common pattern found in Google apps and follows the keylines and metrics for lists.

import Drawer from 'react-toolbox/lib/drawer';

class DrawerTest extends React.Component {
  state = {
    active: false
  };
  
  handleToggle = () => {
    this.setState({active: !this.state.active});
  };

  render () {
    return (
      <div>
        <Button kind='raised' accent label='Show Drawer' onClick={this.handleToggle} />
        <Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
          <h5>This is your Drawer.</h5>
          <p>You can embed any content you want, for example a Menu.</p>
        </Drawer>
      </div>
    );
  }
}

Properties

Name	Type	Default	Description
active	Boolean	false	If true, the drawer will be visible.
className	String	''	Sets a class to give customized styles to the drawer.
onOverlayClick	Function		Callback function to be invoked when the overlay is clicked.
type	String	left	Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.