fix scrolling issues in burger menu

Telefonica · Nov 6, 2024 · 5cb8682 · 5cb8682
1 parent 577fba5
commit 5cb8682
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 37 deletions.
diff --git a/src/navigation-bar.css.ts b/src/navigation-bar.css.ts
@@ -369,36 +369,35 @@ export const burgerMenuButton = style({
     },
 });
 
-export const burgerMenu = style([
-    sprinkles({
-        position: 'fixed',
-        top: NAVBAR_HEIGHT_MOBILE,
-        left: 0,
-        right: 0,
-        background: vars.colors.background,
-    }),
-    {
-        height: `calc(100vh - ${NAVBAR_HEIGHT_MOBILE}px)`,
-    },
-]);
+export const burgerMenu = sprinkles({
+    position: 'fixed',
+    top: NAVBAR_HEIGHT_MOBILE,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: vars.colors.background,
+});
 
-export const burgerMainMenuContainer = style([
-    sprinkles({overflowY: 'auto'}),
-    {
-        height: `calc(100vh - ${NAVBAR_HEIGHT_MOBILE}px)`,
-    },
-]);
+export const burgerMenuContainer = sprinkles({
+    height: '100%',
+    position: 'relative',
+});
 
-export const burgerSubMenuContainer = style([
+export const burgerMenuContentContainer = style([
     sprinkles({
         overflowY: 'auto',
         width: '100%',
+        height: '100%',
         position: 'absolute',
         top: 0,
     }),
     {
-        height: `calc(100vh - ${NAVBAR_HEIGHT_MOBILE}px)`,
-        left: '100vw',
+        transition: `transform ${BURGER_MENU_ANIMATION_DURATION_MS}ms ease-out`,
+        '@media': {
+            ['(prefers-reduced-motion)']: {
+                transition: 'none',
+            },
+        },
     },
 ]);
 

diff --git a/src/navigation-bar.tsx b/src/navigation-bar.tsx
@@ -644,15 +644,14 @@ const MainNavigationBarBurgerMenu = ({
                             nodeRef={menuContentRef}
                         >
                             {(transitionStatus) => (
-                                <div
-                                    ref={menuContentRef}
-                                    style={{
-                                        transition: `transform ${menuAnimationDuration}ms ease-out`,
-                                        transform: `translate(${isSubMenuOpen ? '-100vw' : '0vw'})`,
-                                    }}
-                                >
-                                    {transitionStatus !== 'entered' && (
-                                        <div className={styles.burgerMainMenuContainer}>
+                                <div ref={menuContentRef} className={styles.burgerMenuContainer}>
+                                    <div
+                                        className={styles.burgerMenuContentContainer}
+                                        style={{
+                                            transform: `translate(${isSubMenuOpen ? '-100vw' : '0'})`,
+                                        }}
+                                    >
+                                        {transitionStatus !== 'entered' && (
                                             <ResponsiveLayout>
                                                 <ResetResponsiveLayout>
                                                     <RowList>
@@ -680,14 +679,19 @@ const MainNavigationBarBurgerMenu = ({
                                                 </ResetResponsiveLayout>
                                                 {extra && <Box paddingY={16}>{extra}</Box>}
                                             </ResponsiveLayout>
-                                        </div>
-                                    )}
+                                        )}
+                                    </div>
 
-                                    {transitionStatus !== 'exited' && openedSection !== -1 && (
-                                        <div className={styles.burgerSubMenuContainer}>
-                                            {renderSection(openedSection)}
-                                        </div>
-                                    )}
+                                    <div
+                                        className={styles.burgerMenuContentContainer}
+                                        style={{
+                                            transform: `translate(${isSubMenuOpen ? '0' : '100vw'})`,
+                                        }}
+                                    >
+                                        {transitionStatus !== 'exited' &&
+                                            openedSection !== -1 &&
+                                            renderSection(openedSection)}
+                                    </div>
                                 </div>
                             )}
                         </CSSTransition>