forked from wso2/carbon-apimgt
-
Notifications
You must be signed in to change notification settings - Fork 0
/
GlobalNavBar.jsx
99 lines (94 loc) · 3.35 KB
/
GlobalNavBar.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
import React from 'react';
import { ListItemIcon, Drawer, List, withStyles, ListItem, ListItemText } from '@material-ui/core';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import CustomIcon from 'AppComponents/Shared/CustomIcon';
const styles = theme => ({
list: {
width: theme.custom.drawerWidth,
},
drawerStyles: {
top: 56, // Based on https://github.com/mui-org/material-ui/issues/10076#issuecomment-361232810
[`${theme.breakpoints.up('xs')} and (orientation: landscape)`]: {
top: 48,
},
[theme.breakpoints.up('sm')]: {
top: 64,
},
},
leftLink_Icon: {
color: theme.palette.getContrastText(theme.palette.background.leftMenu),
fontSize: theme.custom.leftMenuIconSize + 'px',
},
listText: {
color: theme.palette.getContrastText(theme.palette.background.drawer),
},
});
const GlobalNavBar = (props) => {
const {
open, toggleGlobalNavBar, classes, theme,
} = props;
const commonStyle = {
style: { top: 64 },
};
const paperStyles = {
style: {
backgroundColor: theme.palette.background.drawer,
top: 64,
},
};
const strokeColor = theme.palette.getContrastText(theme.palette.background.leftMenu);
return (
<div>
<Drawer
className={classes.drawerStyles}
PaperProps={paperStyles}
SlideProps={commonStyle}
ModalProps={commonStyle}
BackdropProps={commonStyle}
open={open}
onClose={toggleGlobalNavBar}
>
<div tabIndex={0} role='button' onClick={toggleGlobalNavBar} onKeyDown={toggleGlobalNavBar}>
<div className={classes.list}>
<List>
<Link to='/apis'>
<ListItem button>
<ListItemIcon>
<CustomIcon
width={32}
height={32}
icon='api'
className={classes.listText}
strokeColor={strokeColor}
/>
</ListItemIcon>
<ListItemText classes={{ primary: classes.listText }} primary='APIs' />
</ListItem>
</Link>
</List>
</div>
</div>
</Drawer>
</div>
);
};
GlobalNavBar.propTypes = {
open: PropTypes.bool.isRequired,
toggleGlobalNavBar: PropTypes.func.isRequired,
classes: PropTypes.shape({
drawerStyles: PropTypes.string,
list: PropTypes.string,
listText: PropTypes.string,
}).isRequired,
theme: PropTypes.shape({
palette: PropTypes.shape({
getContrastText: PropTypes.func,
background: PropTypes.shape({
drawer: PropTypes.string,
leftMenu: PropTypes.string,
}),
}),
}).isRequired,
};
export default withStyles(styles, { withTheme: true })(GlobalNavBar);