-
Notifications
You must be signed in to change notification settings - Fork 0
/
UserMenuDropdown.js
48 lines (42 loc) · 1.29 KB
/
UserMenuDropdown.js
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
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Dropdown, Button, Icon } from "semantic-ui-react";
import PropTypes from "prop-types";
import { RoutesContext } from "src/contexts/RoutesContext";
import { Component as UserAvatar } from "src/components/user-avatar";
import "./userMenuDropdown.css";
class AvatarButton extends Component {
render() {
return (
<Button circular className="user-menu-dropdown__button">
<UserAvatar {...this.props} />
</Button>
);
}
}
export class UserMenuDropdown extends Component {
render() {
return (
<Dropdown
trigger={<AvatarButton {...this.props} />}
pointing="top right"
className="user-menu-dropdown"
>
<Dropdown.Menu>
<Dropdown.Header>User</Dropdown.Header>
<Dropdown.Divider />
<Dropdown.Item as={Link} to={this.context.account}>
<Icon name="user" /> Account
</Dropdown.Item>
<Dropdown.Item as={Link} to="" onClick={this.props.logoutHandler}>
<Icon name="shutdown" /> Logout
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
}
}
UserMenuDropdown.contextType = RoutesContext;
UserMenuDropdown.propTypes = {
logoutHandler: PropTypes.func.isRequired
};