kopia lustrzana https://github.com/bugout-dev/moonstream
account menu
rodzic
0a33c1f0df
commit
6dbc701f47
|
@ -6,7 +6,6 @@ import {
|
||||||
MenuList,
|
MenuList,
|
||||||
MenuItem,
|
MenuItem,
|
||||||
MenuGroup,
|
MenuGroup,
|
||||||
MenuDivider,
|
|
||||||
IconButton,
|
IconButton,
|
||||||
chakra,
|
chakra,
|
||||||
Portal,
|
Portal,
|
||||||
|
@ -33,20 +32,24 @@ const AccountIconButton = (props) => {
|
||||||
/>
|
/>
|
||||||
<Portal>
|
<Portal>
|
||||||
<MenuList
|
<MenuList
|
||||||
zIndex="dropdown"
|
zIndex={100}
|
||||||
width={["100vw", "100vw", "18rem", "20rem", "22rem", "24rem"]}
|
bg="#1A1D22"
|
||||||
borderRadius={0}
|
w="auto"
|
||||||
color="black"
|
minW="auto"
|
||||||
|
borderRadius="10px"
|
||||||
|
p="20px 20px 10px 20px"
|
||||||
|
border="1px solid white"
|
||||||
>
|
>
|
||||||
<MenuGroup>
|
<MenuGroup>
|
||||||
<RouterLink href="/account/security" passHref>
|
<RouterLink href="/account/security" passHref>
|
||||||
<MenuItem>Security</MenuItem>
|
<div className="desktop-menu-item">Security</div>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
<RouterLink href="/account/tokens" passHref>
|
<RouterLink href="/account/tokens" passHref>
|
||||||
<MenuItem>API tokens</MenuItem>
|
<div className="desktop-menu-item" title="API tokens">
|
||||||
|
API tokens
|
||||||
|
</div>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
</MenuGroup>
|
</MenuGroup>
|
||||||
<MenuDivider />
|
|
||||||
{ui.isMobileView &&
|
{ui.isMobileView &&
|
||||||
SITEMAP.map((item, idx) => {
|
SITEMAP.map((item, idx) => {
|
||||||
if (item.type !== PAGETYPE.FOOTER_CATEGORY && item.children) {
|
if (item.type !== PAGETYPE.FOOTER_CATEGORY && item.children) {
|
||||||
|
@ -65,14 +68,14 @@ const AccountIconButton = (props) => {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
})}
|
})}
|
||||||
<MenuDivider />
|
<div
|
||||||
<MenuItem
|
className="desktop-menu-item"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
logout();
|
logout();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Logout
|
Logout
|
||||||
</MenuItem>
|
</div>
|
||||||
</MenuList>
|
</MenuList>
|
||||||
</Portal>
|
</Portal>
|
||||||
</Menu>
|
</Menu>
|
||||||
|
|
|
@ -267,3 +267,32 @@ code {
|
||||||
linear-gradient(to right, transparent 6px, white 6px),
|
linear-gradient(to right, transparent 6px, white 6px),
|
||||||
linear-gradient(to bottom, #444 1px, transparent 1px);
|
linear-gradient(to bottom, #444 1px, transparent 1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.desktop-menu-item {
|
||||||
|
color: white;
|
||||||
|
font-weight: 400;
|
||||||
|
padding-left: 0px;
|
||||||
|
padding-right: 0px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
height: 22px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-menu-item:hover {
|
||||||
|
color: #F56646;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* to dont change div size when bolding text.
|
||||||
|
Need 'title' attr in the longest item's tag*/
|
||||||
|
.desktop-menu-item::after {
|
||||||
|
display: block;
|
||||||
|
content: attr(title);
|
||||||
|
font-weight: 700;
|
||||||
|
height: 1px;
|
||||||
|
color: transparent;
|
||||||
|
overflow: hidden;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
Ładowanie…
Reference in New Issue