fix: scroll on navbar2 (#488)

* fix: scroll on navbar2 * fix: user menu * style: prettier
decentraland · Jan 9, 2024 · b53b593 · b53b593 · vercel · Jan 9, 2024
1 parent eae6457
commit b53b593
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 3 deletions.
diff --git a/src/components/Navbar2/MainMenu/MainMenu.css b/src/components/Navbar2/MainMenu/MainMenu.css
@@ -4,7 +4,7 @@
 }
 
 .dui-navbar2__menu.dui-navbar2__menu-mobile {
-  position: fixed;
+  position: absolute;
   display: none;
   flex-direction: column;
   align-items: flex-start;

diff --git a/src/components/Navbar2/Navbar2.css b/src/components/Navbar2/Navbar2.css
@@ -222,7 +222,7 @@
 .dui-navbar2 .item.submenu {
   background-size: 100% 100%;
   background-position: 0px 0px, 0px 0px;
-  position: fixed;
+  position: absolute;
   top: -1000px;
   z-index: 0;
   left: 0;

diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx
@@ -125,6 +125,7 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
               isOpen={isOpen}
               i18n={i18n}
               onClickToggle={handleToggle}
+              onClickClose={handleClose}
               onClickUserMenuItem={onClickUserMenuItem}
               onClickBalance={handleClickBalance}
             />

diff --git a/src/components/UserMenu/UserMenuSignedIn/UserMenuSignedIn.tsx b/src/components/UserMenu/UserMenuSignedIn/UserMenuSignedIn.tsx
@@ -28,6 +28,7 @@ export const UserMenuSignedIn = (props: UserMenuSignedInProps) => {
     onClickAccountSettings,
     onClickActivity,
     onClickBalance,
+    onClickClose,
     onClickUserMenuItem,
     onClickMyAssets,
     onClickProfile,
@@ -170,6 +171,10 @@ export const UserMenuSignedIn = (props: UserMenuSignedInProps) => {
     [onClickToggle]
   )
 
+  const handleClickClose = useCallback(() => {
+    onClickClose()
+  }, [onClickClose])
+
   const userAddress = useMemo(
     () => avatar?.ethAddress || address,
     [avatar, address]
@@ -190,7 +195,8 @@ export const UserMenuSignedIn = (props: UserMenuSignedInProps) => {
       </div>
       <div
         className={classNames('menu-wrapper', isOpen && 'open')}
-        onMouseLeave={handleClickToggle}
+        onMouseLeave={handleClickClose}
+        onScroll={handleClickClose}
       >
         <div
           className={classNames(

diff --git a/src/components/UserMenu/UserMenuSignedIn/UserMenuSignedIn.types.ts b/src/components/UserMenu/UserMenuSignedIn/UserMenuSignedIn.types.ts
@@ -15,6 +15,7 @@ export type UserMenuSignedInProps = ManaBalancesProps & {
     event: React.MouseEvent<HTMLElement, MouseEvent>
   ) => void
   onClickActivity?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
+  onClickClose?: () => void
   onClickMyAssets?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
   onClickProfile?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
   onClickSignOut?: (