/
MenuWithLinks.tsx
98 lines (91 loc) · 2.79 KB
/
MenuWithLinks.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
import Avatar from '@material-ui/core/Avatar';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import { NextRouter, withRouter } from 'next/router';
import Router from 'next/router';
import React from 'react';
class MenuWithLinks extends React.PureComponent<{
src?: string;
alt?: string;
options: any[];
router: NextRouter;
}> {
public state = {
anchorEl: null,
};
public render() {
const { options, src, alt, children, router } = this.props;
const { anchorEl } = this.state;
return (
<div style={{ textAlign: 'center' }}>
<div
aria-owns={anchorEl ? 'simple-menu' : null}
aria-haspopup="true"
onClick={this.handleClick}
onKeyPress={this.handleClick}
>
{children || (
<Avatar
role="presentation"
src={src}
alt={alt}
style={{ margin: '0px 20px 0px auto', cursor: 'pointer' }}
/>
)}
</div>
<Menu
id="simple-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={this.handleClose}
>
{options.map((option, i) =>
option.separator ? (
<hr style={{ width: '85%', margin: '10px auto' }} key={`separated-${i}`} />
) : (
<MenuItem
onClick={() => {
if (option.external) {
window.location.href = option.href;
} else {
Router.push(option.href, option.as || option.href);
}
this.handleClose();
}}
key={option.href}
style={{
fontWeight: router.asPath.includes(option.highlighterSlug) ? 600 : 300,
fontSize: '14px',
}}
>
{option.avatarUrl ? (
<Avatar
src={`${option.avatarUrl ||
'https://storage.googleapis.com/async-await/async-logo-40.svg'}`}
alt="Team logo"
style={{
margin: '0px 10px 0px 0px',
cursor: 'pointer',
display: 'inline-flex',
height: '32px',
width: '32px',
verticalAlign: 'middle',
}}
/>
) : null}
{option.text}
</MenuItem>
),
)}
</Menu>
</div>
);
}
public handleClick = event => {
this.setState({ anchorEl: event.currentTarget });
};
public handleClose = () => {
this.setState({ anchorEl: null });
};
}
export default withRouter(MenuWithLinks);