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
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import SearchIcon from '@material-ui/icons/Search';
import MenuIcon from '@material-ui/icons/Menu';
import { AppBar, Toolbar, IconButton, Hidden } from '@material-ui/core';
import UserMenu from './UserMenu';
import styles from './header-jss';
function Header(props) {
const {
classes,
toggleDrawerOpen,
margin,
turnDarker,
} = props;
return (
<AppBar
className={
classNames(
classes.appBar,
margin && classes.appBarShift,
classes.appbar,
turnDarker && classes.darker
)
}
>
<Toolbar disableGutters>
<IconButton
className={classes.menuButton}
color="inherit"
aria-label="Menu"
onClick={toggleDrawerOpen}
>
<MenuIcon />
</IconButton>
<div className={classes.flex}>
<div className={classes.wrapper}>
<div className={classes.search}>
<SearchIcon />
</div>
<input className={classes.input} placeholder="Search" />
</div>
</div>
<Hidden xsDown>
<span className={classes.separatorV} />
</Hidden>
<UserMenu />
</Toolbar>
</AppBar>
);
}
Header.propTypes = {
classes: PropTypes.object.isRequired,
toggleDrawerOpen: PropTypes.func.isRequired,
margin: PropTypes.bool.isRequired,
turnDarker: PropTypes.bool.isRequired,
};
export default withStyles(styles)(Header);
|
