content: import React from 'react';
  import Drawer from 'material-ui/Drawer';
  import MenuItem from 'material-ui/MenuItem';
  import RaisedButton from 'material-ui/RaisedButton';
  import FlatButton from 'material-ui/FlatButton';
  import { Accounts } from 'meteor/std:accounts-ui';
  import { Meteor } from 'meteor/meteor';
  import { createContainer } from 'meteor/react-meteor-data';
  
  class LoginDrawer extends React.Component {
    state = {open: false};
    handleToggle = () => { this.setState({open: !this.state.open}); };
    handleClose = () => { this.setState({open: false}); };
    getLabel = () => {
      if(Meteor.userId()) {
        return this.props.currentUser ? this.props.currentUser.username : 'user';
      }
      return 'Sign In';
    }
  
    render() {
      return (
        <div>
          <FlatButton
            label={this.getLabel()}
            onTouchTap={this.handleToggle}>
              <i className="fa fa-user-o" aria-hidden="true"></i>
          </FlatButton>
          <Drawer
            style={{zLevel: 3}}
            docked={false}
            width={200}
            open={this.state.open}
            onRequestChange={open => this.setState({open})}>
  
            <div className='loginForm'>
              <Accounts.ui.LoginForm />
            </div>
          </Drawer>
        </div>
      );
    }
  }
  
  export default createContainer(() => {
    return {currentUser: Meteor.user()};
  }, LoginDrawer);
  