-
Notifications
You must be signed in to change notification settings - Fork 1
/
MainLayout.jsx
105 lines (90 loc) · 2.26 KB
/
MainLayout.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
const { AppBar, IconButton, IconMenu, LeftNav } = mui;
const { MenuItem } = mui.Menus;
const { NavigationMoreVert, NavigationMenu } = mui.SvgIcons;
const Styles = mui.Styles;
const Colors = Styles.Colors;
MainLayout = React.createClass({
propTypes: {
content: React.PropTypes.object
},
getInitialState: function() {
return {
open: false
};
},
getMenuItems() {
return [
{ route: '/', text: 'Home' },
{ route: '/table', text: 'Table' }
];
},
navigate(event, index, item) {
console.log('navigate', item);
FlowRouter.go(item.route);
},
showLeftMenu() {
console.log('show left', this.refs.leftNav);
this.refs.leftNav.handleToggle();
},
render() {
return (
<div className='app'>
<AppLeftNav
ref='leftNav'
/>
<AppBar
title='Title'
onTouchTap={this.showLeftMenu}
iconElementRight={
<IconMenu
iconButtonElement={
<IconButton>
<NavigationMoreVert />
</IconButton>
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem primaryText='Refresh' />
<MenuItem primaryText='Help' />
<MenuItem primaryText='Sign out' />
</IconMenu>
}
/>
<div>
{this.props.content}
</div>
</div>
);
},
Xrender() {
return (
<div className='app'>
<AppBar
title='Home'
onLeftIconButtonTouchTap={()=>this.refs.leftNav.toggle()}
style={{backgroundColor: Colors.deepOrange300}}
iconElementRight={
<IconMenu
iconButtonElement={
<IconButton>
<NavigationMoreVert />
</IconButton>
} >
<MenuItem primaryText='Help' index={1} />
<MenuItem primaryText='Sign out' index={2} />
</IconMenu>
} />
<main>
{this.props.content}
</main>
</div>
);
}
});
// <IconMenu
// iconButtonElement={
// <IconButton>
// <NavigationMenu />
// </IconButton>
// }