From 26c641114b7ba5ca0ef8dfd262d391f812947b9f Mon Sep 17 00:00:00 2001
From: Tim Pechersky <tim.pechersky@gmail.com>
Date: Thu, 21 Apr 2022 19:41:19 +0100
Subject: [PATCH] portals for account button menus

---
 frontend/src/components/AccountIconButton.js | 67 ++++++++++----------
 1 file changed, 35 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/AccountIconButton.js b/frontend/src/components/AccountIconButton.js
index 7cfe08f4..bfed04b4 100644
--- a/frontend/src/components/AccountIconButton.js
+++ b/frontend/src/components/AccountIconButton.js
@@ -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>
   );
 };