fix: UserMenu component bugs (#493)

* fix: noscroll on mobile for UserMenu

* fix: handle properly menu and usermenu

* fix: prettier

src/components/Navbar2/Navbar2.tsx

@@ -64,6 +64,16 @@ export const Navbar2 = React.memo((props: Navbar2Props) => {
     [onClickNavbarItem]
   )
 
+  const handleUserMenuOpen = (
+    event: React.MouseEvent<HTMLElement, MouseEvent>,
+    trackingId: string
+  ) => {
+    if (userMenuProps.onClickOpen) {
+      userMenuProps.onClickOpen(event, trackingId)
+    }
+    handleMobileToggle(event, false)
+  }
+
   return (
     <div
       className={classNames(
@@ -109,9 +119,14 @@ export const Navbar2 = React.memo((props: Navbar2Props) => {
           <div className="dui-navbar2-account">
             <UserMenu
               {...userMenuProps}
+              onClickOpen={
+                isTabletAndBelow
+                  ? handleUserMenuOpen
+                  : userMenuProps.onClickOpen
+              }
               isSignedIn={isSignedIn}
               i18n={i18nUserMenu}
-            ></UserMenu>
+            />
           </div>
         </div>
       </Container>

src/components/UserMenu/UserMenu.tsx

@@ -12,6 +12,7 @@ import { config } from '../../config'
 import { Row } from '../Row/Row'
 
 import './UserMenu.css'
+import { useTabletAndBelowMediaQuery } from '../Media'
 
 export const UserMenu = React.memo((props: UserMenuProps) => {
   const {
@@ -27,6 +28,8 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
     ...signInProps
   } = props
 
+  const isTabletAndBelow = useTabletAndBelowMediaQuery()
+
   const [isOpen, setIsOpen] = useState(false)
   const [trackingId, setTrackingId] = useState<string | null>(null)
   const handleToggle = useCallback(
@@ -39,6 +42,15 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
         if (!prev && onClickOpen) {
           onClickOpen(event, trackId)
         }
+
+        if (isTabletAndBelow) {
+          if (!prev) {
+            window.addEventListener('scroll', noScroll)
+          } else {
+            window.removeEventListener('scroll', noScroll)
+          }
+        }
+
         return !prev
       })
     },
@@ -47,6 +59,9 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
 
   const handleClose = useCallback(() => {
     setIsOpen(false)
+    if (isTabletAndBelow) {
+      window.removeEventListener('scroll', noScroll)
+    }
   }, [setIsOpen])
 
   const handleClickJumpIn = useCallback(
@@ -150,3 +165,7 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
     </Column>
   )
 })
+
+function noScroll() {
+  window.scrollTo(0, 0)
+}

src/components/UserMenu/UserMenuSignedIn/UserMenuSignedIn.tsx

@@ -11,6 +11,7 @@ import Notifications from '../../Notifications/Notifications'
 import ArrowIcon from '../../Icons/ArrowIcon'
 import { config } from '../../../config'
 import { UserMenuEventId } from '../UserMenu.types'
+import { useTabletAndBelowMediaQuery } from '../../Media'
 
 import '../UserMenu.css'
 import './UserMenuSignedIn.css'
@@ -37,6 +38,8 @@ export const UserMenuSignedIn = (props: UserMenuSignedInProps) => {
     onClickWallet
   } = props
 
+  const isTabletAndBelow = useTabletAndBelowMediaQuery()
+
   const handleClickActivity = useCallback(
     (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
       onClickUserMenuItem &&
@@ -196,7 +199,7 @@ export const UserMenuSignedIn = (props: UserMenuSignedInProps) => {
       <div
         className={classNames('menu-wrapper', isOpen && 'open')}
         onMouseLeave={handleClickClose}
-        onScroll={handleClickClose}
+        onScroll={!isTabletAndBelow ? handleClickClose : undefined}
       >
         <div
           className={classNames(