Skip to content

Commit 5b964cc

Browse files
CompuIvesCompuIves
committed
Simplify user menu handling
1 parent 0453db5 commit 5b964cc

File tree

2 files changed

+83
-61
lines changed

2 files changed

+83
-61
lines changed

packages/app/src/app/pages/common/UserMenu/Menu/elements.ts renamed to packages/app/src/app/pages/common/UserMenu/Menu/elements.tsx

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import React from 'react';
12
import styled from 'styled-components';
23
import { Link } from 'react-router-dom';
34
import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
5+
import { MenuSeparator } from 'reakit';
46

57
export const Container = styled.div`
68
background-color: ${props => props.theme.background4};
@@ -13,12 +15,7 @@ export const Container = styled.div`
1315
z-index: 20;
1416
`;
1517

16-
export const LinkItem = styled(Link)`
17-
text-decoration: none;
18-
color: inherit;
19-
`;
20-
21-
export const Item = styled.div<{ to?: string; href?: string }>`
18+
const StyledMenu = styled(Link)<{ to?: string; href?: string }>`
2219
transition: 0.3s ease all;
2320
display: flex;
2421
align-items: center;
@@ -28,24 +25,50 @@ export const Item = styled.div<{ to?: string; href?: string }>`
2825
text-decoration: none;
2926
3027
color: rgba(255, 255, 255, 0.8);
28+
border: 0;
29+
outline: 0;
30+
outline-width: 0 !important;
31+
box-sizing: border-box;
3132
border-left: 2px solid transparent;
33+
background-color: transparent;
34+
width: 100%;
3235
3336
cursor: pointer;
3437
38+
&:focus {
39+
border-color: ${props => props.theme.secondary};
40+
color: white;
41+
background-color: ${props => props.theme.secondary.clearer(0.9)};
42+
outline: 0;
43+
}
44+
3545
&:hover {
3646
border-color: ${props => props.theme.secondary};
3747
color: white;
3848
background-color: ${props => props.theme.secondary.clearer(0.9)};
3949
}
4050
`;
4151

52+
const StyledMenuA = StyledMenu.withComponent('a');
53+
const StyledMenuButton = StyledMenu.withComponent('button');
54+
55+
export const ItemA = React.forwardRef((props: any, ref) => (
56+
<StyledMenuA {...props} ref={ref} />
57+
));
58+
export const ItemButton = React.forwardRef((props: any, ref) => (
59+
<StyledMenuButton {...props} ref={ref} />
60+
));
61+
export const ItemLink = React.forwardRef((props: any, ref) => (
62+
<StyledMenu {...props} innerRef={ref} />
63+
));
64+
4265
export const Icon = styled.span`
4366
margin-right: 0.75rem;
4467
display: inline-flex;
4568
align-items: center;
4669
`;
4770

48-
export const Separator = styled.hr`
71+
export const Separator = styled(MenuSeparator)`
4972
height: 1px;
5073
width: 100%;
5174
margin: 0.5rem 0;

‎packages/app/src/app/pages/common/UserMenu/Menu/index.tsx‎

Lines changed: 53 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useEffect } from 'react';
2-
import { Link } from 'react-router-dom';
32

43
import UserIcon from 'react-icons/lib/ti/user';
54
import ExitIcon from 'react-icons/lib/md/exit-to-app';
@@ -19,7 +18,14 @@ import { MenuItem, Menu as ReakitMenu, MenuStateReturn } from 'reakit/Menu';
1918
// @ts-ignore
2019
import InfoIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/sandbox.svg';
2120

22-
import { Container, Item, Icon, Separator, LinkItem } from './elements';
21+
import {
22+
Container,
23+
Icon,
24+
Separator,
25+
ItemLink,
26+
ItemA,
27+
ItemButton,
28+
} from './elements';
2329
import { FeedbackIcon } from './FeedbackIcon';
2430

2531
interface Props {
@@ -50,86 +56,79 @@ export const Menu = ({
5056
return (
5157
<ReakitMenu {...menuProps} aria-label="user options">
5258
<Container>
53-
<LinkItem to={profileUrl(username)} tabIndex={-1}>
54-
<MenuItem as={Item} {...menuProps}>
55-
<Icon>
56-
<UserIcon />
57-
</Icon>
58-
My Profile
59-
</MenuItem>
60-
</LinkItem>
59+
<MenuItem {...menuProps} to={profileUrl(username)} as={ItemLink}>
60+
<Icon>
61+
<UserIcon />
62+
</Icon>
63+
My Profile
64+
</MenuItem>
6165

62-
<Separator role="presentation" />
63-
<LinkItem to={dashboardUrl()}>
64-
<MenuItem as={Item} {...menuProps}>
65-
<Icon>
66-
<InfoIcon />
67-
</Icon>
68-
Dashboard
69-
</MenuItem>
70-
</LinkItem>
66+
<Separator {...menuProps} />
7167

72-
<LinkItem as="a" href="/docs">
73-
<MenuItem as={Item} {...menuProps}>
74-
<Icon>
75-
<BookIcon />
76-
</Icon>
77-
Documentation
78-
</MenuItem>
79-
</LinkItem>
68+
<MenuItem {...menuProps} to={dashboardUrl()} as={ItemLink}>
69+
<Icon>
70+
<InfoIcon />
71+
</Icon>
72+
Dashboard
73+
</MenuItem>
8074

81-
{curator && (
82-
<LinkItem to={curatorUrl()}>
83-
<MenuItem as={Item} {...menuProps}>
84-
<Icon>
85-
<span style={{ width: 14 }} role="img" aria-label="Star">
86-
✨
87-
</span>
88-
</Icon>
89-
Curator Dashboard
90-
</MenuItem>
91-
</LinkItem>
92-
)}
75+
<MenuItem {...menuProps} href="/docs" as={ItemA}>
76+
<Icon>
77+
<BookIcon />
78+
</Icon>
79+
Documentation
80+
</MenuItem>
9381

94-
<LinkItem as={Link} to={patronUrl()}>
95-
<MenuItem as={Item} {...menuProps}>
82+
{curator && (
83+
<MenuItem {...menuProps} to={curatorUrl()} as={ItemLink}>
9684
<Icon>
97-
<PatronBadge
98-
style={{ width: 24, margin: '-6px -5px' }}
99-
size={24}
100-
/>
85+
<span style={{ width: 14 }} role="img" aria-label="Star">
86+
✨
87+
</span>
10188
</Icon>
102-
Patron Page
89+
Curator Dashboard
10390
</MenuItem>
104-
</LinkItem>
91+
)}
10592

106-
<Separator role="presentation" />
93+
<MenuItem {...menuProps} to={patronUrl()} as={ItemLink}>
94+
<Icon>
95+
<PatronBadge style={{ width: 24, margin: '-6px -5px' }} size={24} />
96+
</Icon>
97+
Patron Page
98+
</MenuItem>
99+
100+
<Separator {...menuProps} />
107101

108-
<MenuItem as={Item} {...menuProps} onClick={openStorageManagement}>
102+
<MenuItem
103+
{...menuProps}
104+
as={ItemButton}
105+
onClick={openStorageManagement}
106+
>
109107
<Icon>
110108
<FolderIcon />
111109
</Icon>
112110
Storage Management
113111
</MenuItem>
114112

115-
<MenuItem as={Item} {...menuProps} onClick={openPreferences}>
113+
<MenuItem {...menuProps} as={ItemButton} onClick={openPreferences}>
116114
<Icon>
117115
<SettingsIcon />
118116
</Icon>
119117
Preferences
120118
</MenuItem>
121119

122-
<Separator role="presentation" />
120+
<Separator {...menuProps} />
123121

124-
<MenuItem as={Item} {...menuProps} onClick={openFeedback}>
122+
<MenuItem {...menuProps} as={ItemButton} onClick={openFeedback}>
125123
<Icon>
126124
<FeedbackIcon />
127125
</Icon>
128126
Submit Feedback
129127
</MenuItem>
130128

131-
<Separator role="presentation" />
132-
<MenuItem as={Item} {...menuProps} onClick={signOut}>
129+
<Separator {...menuProps} />
130+
131+
<MenuItem {...menuProps} as={ItemButton} onClick={signOut}>
133132
<Icon>
134133
<ExitIcon />
135134
</Icon>

0 commit comments

Comments
 (0)