From d735394fae72b24379e6547c5daa54c4be1beb2f Mon Sep 17 00:00:00 2001
From: Ben Honeywill <benhoneywill@gmail.com>
Date: Tue, 15 Mar 2022 21:16:36 +0000
Subject: [PATCH] fix chakra portal issue

---
 app/apps/users/helpers/get-avatar-url.ts      |  4 +-
 .../header/components/header-user-menu.tsx    | 47 +++++++++----------
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/app/apps/users/helpers/get-avatar-url.ts b/app/apps/users/helpers/get-avatar-url.ts
index 26cb475..d5b791b 100644
--- a/app/apps/users/helpers/get-avatar-url.ts
+++ b/app/apps/users/helpers/get-avatar-url.ts
@@ -3,10 +3,10 @@ import type { User } from "@prisma/client";
 import cloudinaryClient from "integrations/cloudinary-client";
 
 const getAvatarUrl = (
-  user: Pick<User, "avatar_id" | "avatar_version">,
+  user: Pick<User, "avatar_id" | "avatar_version"> | null | undefined,
   size: number
 ) => {
-  if (!user.avatar_id) return "";
+  if (!user?.avatar_id) return "";
 
   const version = user.avatar_version ? `${user.avatar_version}` : undefined;
 
diff --git a/app/components/header/components/header-user-menu.tsx b/app/components/header/components/header-user-menu.tsx
index a4596a5..9688dbd 100644
--- a/app/components/header/components/header-user-menu.tsx
+++ b/app/components/header/components/header-user-menu.tsx
@@ -10,7 +10,6 @@ import { Menu, MenuList, MenuItem, MenuButton } from "@chakra-ui/menu";
 import Icon from "@chakra-ui/icon";
 import { SkeletonCircle } from "@chakra-ui/skeleton";
 import { FaChevronDown, FaCog, FaSignOutAlt, FaUser } from "react-icons/fa";
-import { Portal } from "@chakra-ui/portal";
 
 import useCurrentUser from "app/apps/users/hooks/use-current-user";
 import logoutMutation from "app/apps/auth/mutations/logout-mutation";
@@ -39,7 +38,7 @@ const UserMenuButton: FC = () => {
         px={1}
         rightIcon={<Icon pr={1} as={FaChevronDown} />}
       >
-        {user && <Avatar size="xs" src={getAvatarUrl(user, 100)} />}
+        <Avatar size="xs" src={getAvatarUrl(user, 100)} />
       </MenuButton>
     </Fade>
   );
@@ -54,32 +53,30 @@ const HeaderUserMenu: FC = () => {
       <Menu>
         <UserMenuButton />
 
-        <Portal>
-          <MenuList>
-            {user && (
-              <Link
-                href={Routes.ProfilePage({ username: user.username })}
-                passHref
-              >
-                <MenuItem as="a" icon={<FaUser />}>
-                  My profile
-                </MenuItem>
-              </Link>
-            )}
-            <Link href={Routes.PreferencesPage()} passHref>
-              <MenuItem as="a" icon={<FaCog />}>
-                My preferences
+        <MenuList>
+          {user && (
+            <Link
+              href={Routes.ProfilePage({ username: user.username })}
+              passHref
+            >
+              <MenuItem as="a" icon={<FaUser />}>
+                My profile
               </MenuItem>
             </Link>
-            <MenuItem
-              as="button"
-              onClick={() => logout()}
-              icon={<FaSignOutAlt />}
-            >
-              Logout
+          )}
+          <Link href={Routes.PreferencesPage()} passHref>
+            <MenuItem as="a" icon={<FaCog />}>
+              My preferences
             </MenuItem>
-          </MenuList>
-        </Portal>
+          </Link>
+          <MenuItem
+            as="button"
+            onClick={() => logout()}
+            icon={<FaSignOutAlt />}
+          >
+            Logout
+          </MenuItem>
+        </MenuList>
       </Menu>
     </Suspense>
   );