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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import brand from 'ba-api/brand';
import dummy from 'ba-api/dummyContents';
import logo from 'ba-images/logo.svg';
import { Hidden, Drawer, SwipeableDrawer, List, Divider, Avatar } from '@material-ui/core';
import MainMenu from './MainMenu';
import OtherMenu from './OtherMenu';
import styles from './sidebar-jss';
const MenuContent = props => {
const {
classes,
turnDarker,
drawerPaper,
toggleDrawerOpen,
loadTransition
} = props;
return (
<div className={classNames(classes.drawerInner, !drawerPaper ? classes.drawerPaperClose : '')}>
<div className={classes.drawerHeader}>
<div className={classNames(classes.brand, classes.brandBar, turnDarker && classes.darker)}>
<img src={logo} alt={brand.name} />
<h3>{brand.name}</h3>
</div>
<div className={classNames(classes.profile, classes.user)}>
<Avatar
alt={dummy.user.name}
src={dummy.user.avatar}
className={classNames(classes.avatar, classes.bigAvatar)}
/>
<div>
<h4>{dummy.user.name}</h4>
<span>{dummy.user.title}</span>
</div>
</div>
</div>
<div className={classes.menuContainer}>
<MainMenu loadTransition={loadTransition} toggleDrawerOpen={toggleDrawerOpen} />
<Divider className={classes.divider} />
<List>
<OtherMenu toggleDrawerOpen={toggleDrawerOpen} />
</List>
</div>
</div>
);
};
MenuContent.propTypes = {
classes: PropTypes.object.isRequired,
drawerPaper: PropTypes.bool.isRequired,
turnDarker: PropTypes.bool,
toggleDrawerOpen: PropTypes.func,
loadTransition: PropTypes.func,
};
MenuContent.defaultProps = {
turnDarker: false
};
MenuContent.defaultProps = {
toggleDrawerOpen: () => {},
loadTransition: () => {},
};
const MenuContentStyle = withStyles(styles)(MenuContent);
function Sidebar(props) {
const {
classes,
open,
toggleDrawerOpen,
loadTransition,
turnDarker
} = props;
return (
<Fragment>
<Hidden lgUp>
<SwipeableDrawer
onClose={toggleDrawerOpen}
onOpen={toggleDrawerOpen}
open={!open}
anchor="left"
>
<div className={classes.swipeDrawerPaper}>
<MenuContentStyle drawerPaper toggleDrawerOpen={toggleDrawerOpen} loadTransition={loadTransition} />
</div>
</SwipeableDrawer>
</Hidden>
<Hidden mdDown>
<Drawer
variant="permanent"
onClose={toggleDrawerOpen}
classes={{
paper: classNames(classes.drawer, classes.drawerPaper, !open ? classes.drawerPaperClose : ''),
}}
open={open}
anchor="left"
>
<MenuContentStyle
drawerPaper={open}
turnDarker={turnDarker}
loadTransition={loadTransition}
/>
</Drawer>
</Hidden>
</Fragment>
);
}
Sidebar.propTypes = {
classes: PropTypes.object.isRequired,
toggleDrawerOpen: PropTypes.func.isRequired,
loadTransition: PropTypes.func.isRequired,
turnDarker: PropTypes.bool.isRequired,
open: PropTypes.bool.isRequired,
};
export default withStyles(styles)(Sidebar);
|
