fix user profile menu

ui/snippets/navigation/NavLink.tsx

@@ -20,16 +20,17 @@ type Props = {
   px?: string | number;
   className?: string;
   onClick?: () => void;
+  disableActiveState?: boolean;
 }
 
-const NavLink = ({ item, isCollapsed, px, className, onClick }: Props) => {
+const NavLink = ({ item, isCollapsed, px, className, onClick, disableActiveState }: Props) => {
   const isMobile = useIsMobile();
   const colors = useColors();
 
   const isExpanded = isCollapsed === false;
   const isInternalLink = isInternalItem(item);
 
-  const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: isInternalLink && item.isActive });
+  const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: isInternalLink && item.isActive && !disableActiveState });
   const isXLScreen = useBreakpointValue({ base: false, xl: true });
   const href = isInternalLink ? route(item.nextRoute) : item.url;
 

ui/snippets/profileMenu/ProfileMenuContent.tsx

-import { Box, Button, Text, VStack, useColorModeValue } from '@chakra-ui/react';
+import { Box, Button, VStack, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { UserInfo } from 'types/api/account';
@@ -18,7 +18,6 @@ type Props = {
 
 const ProfileMenuContent = ({ data, onNavLinkClick }: Props) => {
   const { accountNavItems, profileItem } = useNavItems();
-  const primaryTextColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
 
   const handleSingOutClick = React.useCallback(() => {
     mixpanel.logEvent(
@@ -32,37 +31,28 @@ const ProfileMenuContent = ({ data, onNavLinkClick }: Props) => {
     return null;
   }
 
+  const userName = data?.email || data?.nickname || data?.name;
+
   return (
     <Box>
-      { (data?.name || data?.nickname) && (
-        <Text
+      { userName && (
+        <Box
           fontSize="sm"
           fontWeight={ 500 }
-          color={ primaryTextColor }
-          { ...getDefaultTransitionProps() }
-        >
-        Signed in as { data.name || data.nickname }
-        </Text>
-      ) }
-      { data?.email && (
-        <Text
-          fontSize="sm"
           mb={ 1 }
-          fontWeight={ 500 }
-          color="gray.500"
-          { ...getDefaultTransitionProps() }
         >
-          { data.email }
-        </Text>
+          <span>Signed in as </span>
+          <chakra.span color="text_secondary">{ userName }</chakra.span>
+        </Box>
       ) }
-      <NavLink item={ profileItem } isActive={ undefined } px="0px" isCollapsed={ false } onClick={ onNavLinkClick }/>
+      <NavLink item={ profileItem } disableActiveState={ true } px="0px" isCollapsed={ false } onClick={ onNavLinkClick }/>
       <Box as="nav" mt={ 2 } pt={ 2 } borderTopColor="divider" borderTopWidth="1px" { ...getDefaultTransitionProps() }>
         <VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden">
           { accountNavItems.map((item) => (
             <NavLink
               key={ item.text }
               item={ item }
-              isActive={ undefined }
+              disableActiveState={ true }
               isCollapsed={ false }
               px="0px"
               onClick={ onNavLinkClick }

ui/snippets/profileMenu/ProfileMenuDesktop.tsx

@@ -97,7 +97,7 @@ const ProfileMenuDesktop = ({ isHomePage, className, fallbackIconSize }: Props)
         </Box>
       </Tooltip>
       { hasMenu && (
-        <PopoverContent w="212px">
+        <PopoverContent maxW="400px" minW="220px" w="min-content">
           <PopoverBody padding="24px 16px 16px 16px">
             <ProfileMenuContent data={ data }/>
           </PopoverBody>

ui/snippets/profileMenu/ProfileMenuMobile.tsx

@@ -66,7 +66,7 @@ const ProfileMenuMobile = () => {
           autoFocus={ false }
         >
           <DrawerOverlay/>
-          <DrawerContent maxWidth="260px">
+          <DrawerContent maxWidth="300px">
             <DrawerBody p={ 6 }>
               <ProfileMenuContent data={ data } onNavLinkClick={ onClose }/>
             </DrawerBody>