const MenuItem = ({iconName, text}) => (
  <div className='MenuItem'>
    <i className={classNames('fa', 'fa-' + iconName)}/>
    <span>{text}</span>
  </div>
)

const Menu = ({onClick}) => {
 const items = [
   { iconName: 'home', text: 'Welcome' },
   { iconName: 'cog', text: 'Settings' },
   { iconName: 'unlock', text: 'Log out' }
 ];
 return (
  <div className='Menu'>
     <button onClick={onClick}>
       <i className='fa fa-times' />
     </button>
    {
       items.map(i => <MenuItem key={i.iconName} iconName={i.iconName} text={i.text} />)
     }
  </div>
 ) 
};

class MainApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { open: false };
    this.onClick = this.onClick.bind(this);
  }
  onClick() {
    this.setState({open: !this.state.open});
    const $Menu = $('.Menu');
    const $button = $Menu.find('button');
    const $MenuItems = $Menu.find('.MenuItem');
    const options = {display: false, duration: 150, easing: 'ease-in-out', stagger: 60 };
    const seqIn = [
      {e: $Menu, p: 'transition.slideRightIn', o: options },
      {e: $MenuItems, p: 'transition.slideRightIn', o: options },
      {e: $button, p: 'transition.slideDownIn', o: options}
    ];
    const seqOut = [
      {e: $MenuItems, p: 'transition.slideRightOut', o: options },
      {e: $button, p: 'transition.slideUpOut', o: options},
      {e: $Menu, p: 'transition.slideRightOut', o: options }
    ];
    $.Velocity.RunSequence(this.state.open ? seqOut : seqIn);
  }
  render() {
    return (
      <div>
        <button className='main' onClick={this.onClick} >
          <i className={classNames('fa', {
            'fa-toggle-on': this.state.open,
            'fa-toggle-off': !this.state.open,
          })} />
        </button>
        <Menu onClick={this.onClick} />
      </div>
    );
  }
}

React.render(
  <MainApp />, 
  document.getElementById('react-root'));