-
Notifications
You must be signed in to change notification settings - Fork 15
/
header.tsx
117 lines (108 loc) · 3.35 KB
/
header.tsx
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
import * as React from "react";
import { Link } from "react-router-dom";
import AppBar from "@material-ui/core/AppBar";
import { Auth } from "aws-amplify";
import { createStyles, WithStyles, withStyles } from "@material-ui/core/styles";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import AccountCircle from "@material-ui/icons/AccountCircle";
import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/Menu";
import Button from "@material-ui/core/Button";
import { Theme } from "@material-ui/core/styles/createMuiTheme";
import SvgCloudcamLight from "./../components/SvgCloudcamLight";
const styles = ({ palette }: Theme) =>
createStyles({
root: {
flexGrow: 1
},
grow: {
flexGrow: 1
},
menuButton: {
marginLeft: -12,
marginRight: 20
},
menuLink: {
color: palette.secondary.light
}
});
export interface IHeaderProps extends WithStyles<typeof styles> {}
class Header extends React.Component<IHeaderProps, any> {
state = {
anchorEl: null
};
handleMenu = event => {
this.setState({ anchorEl: event.currentTarget });
};
handleClose = () => {
this.setState({ anchorEl: null });
};
render() {
const { classes } = this.props;
const { anchorEl } = this.state;
const open = Boolean(anchorEl);
const ProvisionLink = props => <Link to="/provision" {...props} />;
const CamerasLink = props => <Link to="/" {...props} />;
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<Typography
variant="title"
noWrap
style={{
marginRight: "3rem"
}}
>
<a href="/" className={"App-link"}>
<SvgCloudcamLight className="App-logo" alt="logo" />
</a>
</Typography>
<Typography variant="h6" color="inherit" className={classes.grow}>
<Button component={ProvisionLink} className={classes.menuLink}>
Provision
</Button>
<Button component={CamerasLink} className={classes.menuLink}>
Cameras
</Button>
</Typography>
<div>
<IconButton
aria-owns={open ? "menu-appbar" : undefined}
aria-haspopup="true"
onClick={this.handleMenu}
color="inherit"
>
<AccountCircle />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: "top",
horizontal: "right"
}}
transformOrigin={{
vertical: "top",
horizontal: "right"
}}
open={open}
onClose={this.handleClose}
>
<MenuItem onClick={this.logout}>Log Out</MenuItem>
</Menu>
</div>
</Toolbar>
</AppBar>
</div>
);
}
private logout = () => {
Auth.signOut()
.then(data => console.log(data))
.catch(err => console.log(err));
};
}
export default withStyles(styles)(Header);