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
|
import {
Button,
Icon,
Menu,
MenuItem,
MenuSection,
MenuSeparator,
MenuTrigger,
Popover,
Row,
Text,
} from '@umami/react-zen';
import { Fragment } from 'react';
import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
import { LockKeyhole, LogOut, UserCircle } from '@/components/icons';
export function ProfileButton() {
const { formatMessage, labels } = useMessages();
const { user } = useLoginQuery();
const { renderUrl } = useNavigation();
const items = [
{
id: 'settings',
label: formatMessage(labels.profile),
path: renderUrl('/settings/profile'),
icon: <UserCircle />,
},
user.isAdmin &&
!process.env.cloudMode && {
id: 'admin',
label: formatMessage(labels.admin),
path: '/admin',
icon: <LockKeyhole />,
},
{
id: 'logout',
label: formatMessage(labels.logout),
path: '/logout',
icon: <LogOut />,
separator: true,
},
].filter(n => n);
return (
<MenuTrigger>
<Button data-test="button-profile" variant="quiet">
<Icon>
<UserCircle />
</Icon>
</Button>
<Popover placement="bottom end">
<Menu autoFocus="last">
<MenuSection title={user.username}>
<MenuSeparator />
{items.map(({ id, path, label, icon, separator }) => {
return (
<Fragment key={id}>
{separator && <MenuSeparator />}
<MenuItem id={id} href={path}>
<Row alignItems="center" gap>
<Icon>{icon}</Icon>
<Text>{label}</Text>
</Row>
</MenuItem>
</Fragment>
);
})}
</MenuSection>
</Menu>
</Popover>
</MenuTrigger>
);
}
|