How can I deploy AppBar Material UI? - reactjs

Question

Im new in React Material UI and I am trying to deploy AppBar but i do not know how can I include childs into this NavBar. I want deploy AppBar when I click on the three left lines menu. My .jsx is:
import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import FlatButton from 'material-ui/FlatButton';
const STYLES = {
title: {
cursor: 'pointer',
},
titleStyle: {
textAlign: 'center'
},
buttonStyle: {
backgroundColor: 'transparent',
color: 'white'
}
};
const rightButtons = (
<div>
<FlatButton label="About" style={STYLES.buttonStyle} />
<FlatButton label="Home" style={STYLES.buttonStyle} />
</div>
);
export default class MenuAlumno extends React.Component {
constructor() {
super();
this.state = {
abierto:false
}
}
handleTouchTap = () => {
//alert('Has clickado sobre el título');
/*
console.log(this.state.abierto)
this.setState({
abierto:true
});
*/
console.log(this.state.abierto)
this.state.abierto = true;
console.log(this.state.abierto)
}
render() {
return (
<AppBar
title={<span style={STYLES.title}>- PLATAFORMA DE INCIDENCIAS -
</span>}
onTitleTouchTap={this.handleTouchTap}
titleStyle={STYLES.titleStyle}
iconClassNameRight="muidocs-icon-navigation-expand-more"
iconElementLeft={rightButtons}
>
</AppBar>
);
}
}
But this code replaces the 3 left lines for FlatButtons.
I want that when I click on the MenuButtonLeft a side menu deploy with the pages that contain my website (home, about us, contact,...). With the code I put before only shows the MenuButtonLeft and a Title into a Toolbar, but it does not do any action, it does not deploy any menu with the href to my others pages in my website.
Thank you.

Answer 1

Use the following code.
import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import FlatButton from 'material-ui/FlatButton';
import Drawer from 'material-ui/Drawer';
const STYLES = {
title: {
cursor: 'pointer',
},
titleStyle: {
textAlign: 'center'
},
buttonStyle: {
backgroundColor: 'transparent',
color: 'white'
}
};
const rightButtons = (
<div>
<FlatButton label="About" style={STYLES.buttonStyle} />
<FlatButton label="Home" style={STYLES.buttonStyle} />
</div>
);
export default class MenuAlumno extends React.Component {
constructor() {
super();
this.state = {
abierto:false
}
}
handleTouchTap = () => {
//alert('Has clickado sobre el título');
/*
console.log(this.state.abierto)
this.setState({
abierto:true
});
*/
console.log(this.state.abierto)
this.state.abierto = true;
console.log(this.state.abierto)
}
render() {
return (
<div>
<AppBar
title={<span style={STYLES.title}>- PLATAFORMA DE INCIDENCIAS -
</span>}
onTitleTouchTap={this.handleTouchTap}
titleStyle={STYLES.titleStyle}
iconClassNameRight="muidocs-icon-navigation-expand-more"
>
</AppBar>
<Drawer docked={false} width={200} open={this.state.abierto} >
{rightButtons}
</Drawer>
</div>
);
}
}

Answer 2

I resolve the problem above! Here is the solution:
import React from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import NavigationMenu from 'material-ui/svg-icons/navigation/menu';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
/*
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import FlatButton from 'material-ui/FlatButton';
*/
const STYLES = {
title: {
cursor: 'pointer'
},
titleStyle: {
textAlign: 'center'
},
displayMenuTrue: {
position: 'relative'
},
displayMenuFalse: {
display: 'none'
},
contentStyle: {
transition: 'margin-left 450ms cubic-bezier(0.23, 1, 0.32, 1)',
marginLeft: '0px',
top: '0px'
},
contentStyleActive: {
marginLeft: '256px',
position: 'relative',
top: '-144px'
}
};
export default class MenuAlumno extends React.Component {
constructor() {
super();
this.state = {
drawerOpen:false
}
}
handleTouchTap = () => {
//alert('Has clickado sobre el título');
/*
console.log(this.state.abierto)
this.setState({
abierto:true
});
*/
console.log(this.state.drawerOpen)
this.state.drawerOpen = true;
console.log(this.state.drawerOpen)
}
controlMenu = () => {
if (this.state.drawerOpen) {
console.log(this.state.drawerOpen)
this.setState({
drawerOpen: false
});
$('.contenedor').css(STYLES.contentStyle);
} else {
console.log(this.state.drawerOpen)
this.setState({
drawerOpen: true
});
$('.contenedor').css(STYLES.contentStyle).css(STYLES.contentStyleActive);
}
}
render() {
return (
<div>
<AppBar
title={<span style={STYLES.title}>- PLATAFORMA DE
INCIDENCIAS -</span>}
onTitleTouchTap={this.handleTouchTap}
titleStyle={STYLES.titleStyle}
iconElementLeft={this.state.drawerOpen ? <IconButton>
<NavigationClose/></IconButton> : <IconButton><NavigationMenu/></IconButton>}
onLeftIconButtonTouchTap={this.controlMenu}
/>
<Drawer
open={this.state.drawerOpen}
containerStyle={this.state.drawerOpen ?
STYLES.displayMenuTrue : STYLES.displayMenuFalse}
>
<MenuItem>Menu Item</MenuItem>
<MenuItem>Menu Item</MenuItem>
<MenuItem>Menu Item</MenuItem>
</Drawer>
</div>
);
}
}