() => {

  class DrawerStory extends React.Component {

    constructor(props) {

      super(props)

      this.state = {

        drawerDirection: 'left',

        active: false,

      }

​

      this.showDrawerClicked = this.showDrawerClicked.bind(this)

      this.hideDrawer = this.hideDrawer.bind(this)

    }

    showDrawerClicked(drawerDirection) {

      this.setState({

        drawerDirection,

        active: true,

      })

    }

​

    hideDrawer() {

      this.setState({

        active: false,

      })

    }

​

    render() {

      return (

        <>

          <div style={{ display: 'flex', justifyContent: 'space-between' }}>

            <Button onClick={() => this.showDrawerClicked('left')}>

              Open Left Drawer

            </Button>

            <Button

              onClick={() => this.showDrawerClicked('right')}

              style={{ float: 'right' }}

            >

              Open Right Drawer

            </Button>

          </div>

          <Drawer

            active={this.state.active}

            right={this.state.drawerDirection === 'right'}

            onRequestClose={this.hideDrawer}

          >

            <SideNav>

              <SideNavTitle>Sidenav Group</SideNavTitle>

              <nav>

                <SideNavLink>Agricultural</SideNavLink>

                <SideNavLink>Transition</SideNavLink>

                <SideNavLink>Perpetual</SideNavLink>

                <SideNavLink>Cultural</SideNavLink>

              </nav>

            </SideNav>

          </Drawer>

        </>

      )

    }

  }

​

  return <DrawerStory />

}