Skip to content

Commit

Permalink
remove portals, fix focus order in small desktop menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcoskolodny
marcoskolodny committed Nov 4, 2024
1 parent a08bfec commit d2dcb9a
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 104 deletions.
Binary file modified ...sx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...sx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-2-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...x-main-navigation-bar-with-large-menu-and-default-content-in-desktop-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...x-main-navigation-bar-with-large-menu-and-default-content-in-desktop-2-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 7 additions & 1 deletion src/navigation-bar.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -391,10 +391,15 @@ export const lineHeightFix = style({
lineHeight: 0,
});

export const desktopMenuWrapper = sprinkles({
position: 'absolute',
left: 0,
right: 0,
});

export const desktopMenuContainer = style([
sprinkles({
background: vars.colors.backgroundContainer,
position: 'fixed',
width: '100%',
}),
{
Expand All @@ -416,6 +421,7 @@ export const desktopSmallMenuContainer = style([
paddingX: 24,
}),
{
zIndex: NAVBAR_ZINDEX,
borderRadius: `0 0 ${vars.borderRadii.popup} ${vars.borderRadii.popup}`,
width: DESKTOP_SMALL_MENU_WIDTH,
overflowY: 'auto',
Expand Down
208 changes: 105 additions & 103 deletions src/navigation-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -714,80 +714,81 @@ const MainNavigationBarDesktopMenu = ({

return (
<div className={styles.desktopOnly}>
<Portal>
<CSSTransition
in={isMenuOpen}
timeout={menuAnimationDuration}
nodeRef={menuRef}
mountOnEnter
unmountOnExit
onEnter={() => {
// Hack to be able to set the fade-in effect in the content after the first render
isAnySectionOpened.current = true;
}}
onExiting={() => setIsMenuContentScrollable(false)}
onExited={() => {
isAnySectionOpened.current = false;
onMenuExited();
}}
>
<div
className={styles.desktopMenuContainer}
onMouseEnter={() => setIsMenuHovered(true)}
onMouseLeave={() => setIsMenuHovered(false)}
ref={menuRef}
style={{
top: topSpace,
height: menuHeight,
maxHeight: `calc(100vh - ${topSpace}px - ${bottomSpace}px)`,
overflowY: isMenuContentScrollable ? 'auto' : 'hidden',
<ResetResponsiveLayout>
<div className={styles.desktopMenuWrapper} style={{top: topSpace}}>
<CSSTransition
in={isMenuOpen}
timeout={menuAnimationDuration}
nodeRef={menuRef}
mountOnEnter
unmountOnExit
onEnter={() => {
// Hack to be able to set the fade-in effect in the content after the first render
isAnySectionOpened.current = true;
}}
onExiting={() => setIsMenuContentScrollable(false)}
onExited={() => {
isAnySectionOpened.current = false;
onMenuExited();
}}
>
<ResponsiveLayout>
<div
className={classnames(styles.desktopMenu, {
[styles.desktopMenuContentFadeIn]: isAnySectionOpened.current,
})}
ref={(el) => {
if (el) {
// In old browsers where min() is not supported, the speed of the menu
// height's animation will depend on the height of the content instead of
// the height of the container.
const value = supportsCssMin()
? `min(${el.scrollHeight}px, calc(100vh - ${topSpace}px - ${bottomSpace}px))`
: `${el.scrollHeight}px`;
setMenuHeight(!isMenuOpen ? '0px' : value);
}
}}
>
{customContent ? (
typeof customContent === 'function' ? (
customContent({closeMenu})
<div
className={styles.desktopMenuContainer}
onMouseEnter={() => setIsMenuHovered(true)}
onMouseLeave={() => setIsMenuHovered(false)}
ref={menuRef}
style={{
height: menuHeight,
maxHeight: `calc(100vh - ${topSpace}px - ${bottomSpace}px)`,
overflowY: isMenuContentScrollable ? 'auto' : 'hidden',
}}
>
<ResponsiveLayout>
<div
className={classnames(styles.desktopMenu, {
[styles.desktopMenuContentFadeIn]: isAnySectionOpened.current,
})}
ref={(el) => {
if (el) {
// In old browsers where min() is not supported, the speed of the menu
// height's animation will depend on the height of the content instead of
// the height of the container.
const value = supportsCssMin()
? `min(${el.scrollHeight}px, calc(100vh - ${topSpace}px - ${bottomSpace}px))`
: `${el.scrollHeight}px`;
setMenuHeight(!isMenuOpen ? '0px' : value);
}
}}
>
{customContent ? (
typeof customContent === 'function' ? (
customContent({closeMenu})
) : (
customContent
)
) : (
customContent
)
) : (
<Grid
rows={1}
columns={12}
gap={24}
dataAttributes={{'navigation-bar-menu-items': 'true'}}
>
{columns.map((column, columnIdx) => (
<GridItem key={columnIdx} columnSpan={2}>
<MainNavigationBarDesktopMenuSectionColumn
column={column}
columnIndex={columnIdx}
/>
</GridItem>
))}
</Grid>
)}
</div>
</ResponsiveLayout>
</div>
</CSSTransition>
</Portal>
<Grid
rows={1}
columns={12}
gap={[24, 40]}
dataAttributes={{'navigation-bar-menu-items': 'true'}}
>
{columns.map((column, columnIdx) => (
<GridItem key={columnIdx} columnSpan={2}>
<MainNavigationBarDesktopMenuSectionColumn
column={column}
columnIndex={columnIdx}
/>
</GridItem>
))}
</Grid>
)}
</div>
</ResponsiveLayout>
</div>
</CSSTransition>
</div>
</ResetResponsiveLayout>
</div>
);
};
Expand All @@ -814,36 +815,34 @@ const MainNavigationBarDesktopSmallMenu = ({
return (
<div className={styles.desktopOnly}>
{index === openedSection && (
<Portal>
<div
className={styles.desktopSmallMenuContainer}
onMouseEnter={() => setIsMenuHovered(true)}
onMouseLeave={() => setIsMenuHovered(false)}
style={{
top: topSpace,
left: leftPosition,
maxHeight: `calc(100vh - ${topSpace}px - ${bottomSpace}px)`,
}}
>
{customContent ? (
typeof customContent === 'function' ? (
customContent({closeMenu})
) : (
customContent
)
<div
className={styles.desktopSmallMenuContainer}
onMouseEnter={() => setIsMenuHovered(true)}
onMouseLeave={() => setIsMenuHovered(false)}
style={{
top: topSpace,
left: leftPosition,
maxHeight: `calc(100vh - ${topSpace}px - ${bottomSpace}px)`,
}}
>
{customContent ? (
typeof customContent === 'function' ? (
customContent({closeMenu})
) : (
<Stack space={40} dataAttributes={{'navigation-bar-menu-items': 'true'}}>
{columns.map((column, columnIdx) => (
<MainNavigationBarDesktopMenuSectionColumn
key={columnIdx}
column={column}
columnIndex={columnIdx}
/>
))}
</Stack>
)}
</div>
</Portal>
customContent
)
) : (
<Stack space={40} dataAttributes={{'navigation-bar-menu-items': 'true'}}>
{columns.map((column, columnIdx) => (
<MainNavigationBarDesktopMenuSectionColumn
key={columnIdx}
column={column}
columnIndex={columnIdx}
/>
))}
</Stack>
)}
</div>
)}
</div>
);
Expand Down Expand Up @@ -1077,6 +1076,12 @@ export const MainNavigationBar = ({
desktopSmallMenu={desktopSmallMenu}
/>
))}
{!desktopSmallMenu && (
<MainNavigationBarDesktopMenu
sections={sections}
isLargeNavigationBar={hasBottomSections}
/>
)}
</Inline>
</nav>
);
Expand Down Expand Up @@ -1134,9 +1139,6 @@ export const MainNavigationBar = ({
</ResponsiveLayout>
</Header>
{topFixed && <div className={hasBottomSections ? styles.spacerLarge : styles.spacer} />}
{!desktopSmallMenu && (
<MainNavigationBarDesktopMenu sections={sections} isLargeNavigationBar={hasBottomSections} />
)}
</ThemeVariant>
);

Expand Down

0 comments on commit d2dcb9a

Please sign in to comment.