Ad
Material-ui LeftNav With Toolbar Not Working
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>
)
}
});
Ad
Answer
I'm just looking at this now too. It maybe that these are deprecated items? https://github.com/callemall/material-ui/issues/2491
however, this is using 0.14 - not sure which version you're on
update: I have a working example and code here: https://github.com/dcsan/react-hot/blob/master/app/client/layouts/MainLayout.jsx#L25-L53
demo http://react-hot.meteor.com
hope that helps!
Ad
source: stackoverflow.com
Related Questions
- → Material-ui LeftNav with Toolbar not working
- → How to control meteor data stream with react?
- → Render array of inputs in react
- → Setting Page Title with useraccounts:flow-router
- → Convert a collectionFS file from filesystem to gridFS on serverside
- → Meteor Accounts add extra fields
- → React + Parse or React + Meteor?
- → Meteor: ReactMeteorData with Ecmascript6
- → Implement SEO to Meteor app the right way
- → Meteor: file upload error
- → Meteor: Iterating over an Object inside of a Collection
- → Node JS project where client side javascript variables persist?
- → Meteor + React how to set the value of a lot of input elements and modify them after
Ad