Material-ui LeftNav with Toolbar not working

15 December 2015 - 1 answer

Following is my code for implementing LeftNav with Toolbar. I am using Material-UI package for meteor. LeftNav does not show up at all. When similar configuration used with AppBar it works fine. Need some help to fix the problem.

    var {Toolbar, ToolbarGroup, , ToolbarTitle, FontIcon,FlatButton,ToolbarSeparator,IconButton,LeftNav,FlatButton} = MUI;

    let {SvgIcons} = MUI.Libs;
    let LeftIcon = <SvgIcons.NavigationExpandMore />

let LeftIcon = <SvgIcons.NavigationExpandMore />

var menuItems = [
    { route: 'get-started', text: 'Get Started' },
    { route: 'customization', text: 'Customization' },
    { route: 'components', text: 'Components' },
    { type: MenuItem.Types.SUBHEADER, text: 'Resources' },
    {
        type: MenuItem.Types.LINK,
        payload: 'https://github.com/callemall/material-ui',
        text: 'GitHub'
    },
    {
        text: 'Disabled',
        disabled: true
    },
    {
        type: MenuItem.Types.LINK,
        payload: 'https://www.google.com',
        text: 'Disabled Link',
        disabled: true
    }
    ];
    injectTapEventPlugin();

    Header = React.createClass({

        _toggle(e){
            e.preventDefault()
            this.refs.leftNav.toggle()
        },

        render(){
            return(
                <div>
                    <LeftNav ref="leftNav" docked={false} menuItems={menuItems onLeftIconButtonTouchTap={this._toggle}} />
                <Toolbar>
                    <ToolbarGroup key={0} float="left">
                        <ToolbarTitle text="React" />
                    </ToolbarGroup>
                    <ToolbarGroup key={1} float="right">
                        <FontIcon className="muidocs-icon-custom-sort" />
                        <FlatButton label="Questions" linkButton={true} target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/login" secondary={true}/>}
                        <ToolbarSeparator/>
                        {Meteor.userId() ? <FlatButton label="Logout" onClick={Meteor.logout}/> : <FlatButton label="Login" linkButton={true} target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/login" primary={true}/>}
                    </ToolbarGroup>
                </Toolbar>
                </div>        
            )
        }
    });