portals for account button menus

pull/595/head
Tim Pechersky 2022-04-21 19:41:19 +01:00
rodzic fb44e92526
commit 26c641114b
1 zmienionych plików z 35 dodań i 32 usunięć

Wyświetl plik

@ -9,6 +9,7 @@ import {
MenuDivider,
IconButton,
chakra,
Portal,
} from "@chakra-ui/react";
import { RiAccountCircleLine } from "react-icons/ri";
import useLogout from "../core/hooks/useLogout";
@ -30,39 +31,41 @@ const AccountIconButton = (props) => {
icon={<RiAccountCircleLine m={0} size="26px" />}
color="gray.100"
/>
<MenuList
zIndex="dropdown"
width={["100vw", "100vw", "18rem", "20rem", "22rem", "24rem"]}
borderRadius={0}
>
<MenuGroup>
<RouterLink href="/account/security" passHref>
<MenuItem>Security</MenuItem>
</RouterLink>
<RouterLink href="/account/tokens" passHref>
<MenuItem>API tokens</MenuItem>
</RouterLink>
</MenuGroup>
<MenuDivider />
{ui.isMobileView &&
ALL_NAV_PATHES.map((pathToLink, idx) => {
return (
<MenuItem key={`AccountIconButton-All_nav_pathes-${idx}`}>
<RouterLink href={pathToLink.path}>
{pathToLink.title}
</RouterLink>
</MenuItem>
);
})}
<MenuDivider />
<MenuItem
onClick={() => {
logout();
}}
<Portal>
<MenuList
zIndex="dropdown"
width={["100vw", "100vw", "18rem", "20rem", "22rem", "24rem"]}
borderRadius={0}
>
Logout
</MenuItem>
</MenuList>
<MenuGroup>
<RouterLink href="/account/security" passHref>
<MenuItem>Security</MenuItem>
</RouterLink>
<RouterLink href="/account/tokens" passHref>
<MenuItem>API tokens</MenuItem>
</RouterLink>
</MenuGroup>
<MenuDivider />
{ui.isMobileView &&
ALL_NAV_PATHES.map((pathToLink, idx) => {
return (
<MenuItem key={`AccountIconButton-All_nav_pathes-${idx}`}>
<RouterLink href={pathToLink.path}>
{pathToLink.title}
</RouterLink>
</MenuItem>
);
})}
<MenuDivider />
<MenuItem
onClick={() => {
logout();
}}
>
Logout
</MenuItem>
</MenuList>
</Portal>
</Menu>
);
};