Skip to content

Commit

Permalink
fix focus logic and right content height
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcoskolodny
marcoskolodny committed Nov 5, 2024
1 parent 7c068e0 commit 90f4593
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 68 deletions.
142 changes: 86 additions & 56 deletions src/navigation-bar.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,26 +143,35 @@ export const desktopMenuSectionContainer = style([
},
]);

export const desktopMenuSectionWithArrowWrapper = style({
export const desktopMenuSectionWithArrowWrapper = sprinkles({
position: 'relative',
});

export const desktopMenuSectionArrowContainer = style({
position: 'absolute',
zIndex: -1,
right: -8,
top: 0,
bottom: 0,
display: 'flex',
alignItems: 'center',
});
export const desktopMenuSectionArrowContainer = style([
sprinkles({
position: 'absolute',
top: 0,
bottom: 0,
display: 'flex',
alignItems: 'center',
}),
{
// Avoid element from affecting hover status of the section
zIndex: -1,
right: -8,
},
]);

export const desktopMenuSectionArrow = style({
border: 'none',
background: 'transparent',
padding: 0,
transition: `opacity 0.1s`,
});
export const desktopMenuSectionArrow = style([
sprinkles({
border: 'none',
background: 'transparent',
padding: 0,
}),
{
transition: `opacity 0.1s`,
},
]);

export const section = style([
sprinkles({
Expand Down Expand Up @@ -209,22 +218,26 @@ export const textWrapperVariants = styleVariants({
},
});

export const navigationBarContent = style({
alignItems: 'center',
width: '100%',
display: 'flex',
height: NAVBAR_HEIGHT_DESKTOP,
'@media': {
[mq.tabletOrSmaller]: {
height: NAVBAR_HEIGHT_MOBILE - borderWidth,
},
[mq.desktopOrBigger]: {
':last-child': {
height: NAVBAR_HEIGHT_DESKTOP - borderWidth,
export const navigationBarContent = style([
sprinkles({
alignItems: 'center',
width: '100%',
display: 'flex',
}),
{
height: NAVBAR_HEIGHT_DESKTOP,
'@media': {
[mq.tabletOrSmaller]: {
height: NAVBAR_HEIGHT_MOBILE - borderWidth,
},
[mq.desktopOrBigger]: {
':last-child': {
height: NAVBAR_HEIGHT_DESKTOP - borderWidth,
},
},
},
},
});
]);

export const navigationBarAction = sprinkles({
border: 'none',
Expand All @@ -240,18 +253,29 @@ export const desktopOnly = style({
},
});

export const navigationBarContentRight = style({
display: 'flex',
flex: 1,
alignItems: 'center',
justifyContent: 'flex-end',
paddingLeft: 136,
'@media': {
[mq.tabletOrSmaller]: {
paddingLeft: 24,
export const navigationBarContentRight = style([
sprinkles({
display: 'flex',
flex: 1,
alignItems: 'center',
justifyContent: 'flex-end',
}),
{
paddingLeft: 136,
height: NAVBAR_HEIGHT_DESKTOP,
'@media': {
[mq.tabletOrSmaller]: {
paddingLeft: 24,
height: NAVBAR_HEIGHT_MOBILE - borderWidth,
},
[mq.desktopOrBigger]: {
':last-child': {
height: NAVBAR_HEIGHT_DESKTOP - borderWidth,
},
},
},
},
});
]);

const spacerMobile = style({
'@media': {
Expand Down Expand Up @@ -280,7 +304,7 @@ export const burgerMenuTransition = {
transform: 'translate(-100vw)',
}),
enterActive: style({
transform: 'translate(0vw)',
transform: 'translate(0)',
transition: `transform ${BURGER_MENU_ANIMATION_DURATION_MS}ms ease-out`,
'@media': {
['(prefers-reduced-motion)']: {
Expand All @@ -289,7 +313,7 @@ export const burgerMenuTransition = {
},
}),
exit: style({
transform: 'translate(0vw)',
transform: 'translate(0)',
}),
exitActive: style({
transform: 'translate(-100vw)',
Expand All @@ -302,7 +326,7 @@ export const burgerMenuTransition = {
}),
};

export const mainNavbarContent = style({
export const mainNavbarContent = sprinkles({
display: 'flex',
alignItems: 'center',
});
Expand Down Expand Up @@ -344,19 +368,25 @@ export const burgerMenu = style([
},
]);

export const burgerMainMenuContainer = style({
height: `calc(100vh - ${NAVBAR_HEIGHT_MOBILE}px)`,
overflowY: 'auto',
});
export const burgerMainMenuContainer = style([
sprinkles({overflowY: 'auto'}),
{
height: `calc(100vh - ${NAVBAR_HEIGHT_MOBILE}px)`,
},
]);

export const burgerSubMenuContainer = style({
height: `calc(100vh - ${NAVBAR_HEIGHT_MOBILE}px)`,
overflowY: 'auto',
width: '100%',
position: 'absolute',
left: '100vw',
top: 0,
});
export const burgerSubMenuContainer = style([
sprinkles({
overflowY: 'auto',
width: '100%',
position: 'absolute',
top: 0,
}),
{
height: `calc(100vh - ${NAVBAR_HEIGHT_MOBILE}px)`,
left: '100vw',
},
]);

export const iconButtonVariants = styleVariants({
default: [
Expand Down Expand Up @@ -444,12 +474,12 @@ export const desktopSmallMenuContainer = style([
position: 'fixed',
paddingY: 40,
paddingX: 24,
overflowY: 'auto',
}),
{
zIndex: NAVBAR_ZINDEX,
borderRadius: `0 0 ${vars.borderRadii.popup} ${vars.borderRadii.popup}`,
width: DESKTOP_SMALL_MENU_WIDTH,
overflowY: 'auto',
boxShadow: '0px 2px 4px rgba(0,0,0,0.2)',
},
]);
Expand All @@ -471,7 +501,7 @@ export const desktopMenu = style([
]);

export const desktopMenuContentFadeIn = style({
transform: 'translateY(0px)',
transform: 'translateY(0)',
opacity: 1,
transition: `opacity ${DESKTOP_MENU_CONTENT_ANIMATION_DURATION_MS}ms cubic-bezier(0.33, 1, 0.68, 1), transform ${DESKTOP_MENU_CONTENT_ANIMATION_DURATION_MS}ms cubic-bezier(0.33, 1, 0.68, 1)`,
'@media': {
Expand Down
28 changes: 16 additions & 12 deletions src/navigation-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -371,7 +371,7 @@ const MainNavigationBarDesktopMenuContextProvider = ({

let id: NodeJS.Timeout;

// If menu started opening/closing
// menu starts opening or closing
if (!isMenuOpen) {
dispatch('close');
id = setTimeout(() => dispatch('finishClose'), menuAnimationDuration);
Expand Down Expand Up @@ -947,7 +947,7 @@ const MainNavigationBarDesktopSection = ({
const {title, menu, ...touchableProps} = section;
const sectionRef = React.useRef<HTMLDivElement>(null);
const [smallMenuLeftPosition, setSmallMenuLeftPosition] = React.useState(0);
const [isArrowFocused, setIsArrowFocused] = React.useState(false);
const [isMenuControlFocused, setIsMenuControlFocused] = React.useState(false);
const {isMenuOpen, openedSection, setSectionAsActive, setSectionAsInactive} =
useMainNavigationBarDesktopMenuState();

Expand Down Expand Up @@ -976,20 +976,18 @@ const MainNavigationBarDesktopSection = ({

React.useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
const shouldReactOnArrowKeyPress = isArrowFocused || (menu && !hasCustomInteraction);

switch (e.key) {
// If arrow is focused and DOWN key is pressed, open the menu if it was closed
case DOWN:
if (shouldReactOnArrowKeyPress) {
if (isMenuControlFocused) {
cancelEvent(e);
openSectionMenu();
}
break;

// If arrow is focused and UP key is pressed, close the menu if it was opened
case UP:
if (shouldReactOnArrowKeyPress) {
if (isMenuControlFocused) {
cancelEvent(e);
setSectionAsInactive(index, true);
}
Expand All @@ -1004,7 +1002,7 @@ const MainNavigationBarDesktopSection = ({
return () => {
document.removeEventListener('keydown', handleKeyDown, false);
};
}, [index, isArrowFocused, openSectionMenu, setSectionAsInactive, menu, hasCustomInteraction]);
}, [index, isMenuControlFocused, openSectionMenu, setSectionAsInactive, menu, hasCustomInteraction]);

const isSectionMenuOpen = isMenuOpen && openedSection === index;

Expand Down Expand Up @@ -1041,6 +1039,12 @@ const MainNavigationBarDesktopSection = ({
// TODO: debounce this!
onMouseEnter={openSectionMenu}
onMouseLeave={() => setSectionAsInactive(index)}
onFocus={() => {
if (menu && !hasCustomInteraction) setIsMenuControlFocused(true);
}}
onBlur={() => {
if (menu && !hasCustomInteraction) setIsMenuControlFocused(false);
}}
>
<BaseTouchable
{...getSectionInteractiveProps(touchableProps as InteractiveProps)}
Expand Down Expand Up @@ -1070,22 +1074,22 @@ const MainNavigationBarDesktopSection = ({
{hasCustomInteraction && (
<div
className={styles.desktopMenuSectionArrowContainer}
onFocus={() => setIsArrowFocused(true)}
onBlur={() => setIsArrowFocused(false)}
onFocus={() => setIsMenuControlFocused(true)}
onBlur={() => setIsMenuControlFocused(false)}
>
<BaseTouchable
className={styles.desktopMenuSectionArrow}
aria-label={`${section.title}, ${texts.mainNavigationBarOpenSectionMenu || t(tokens.mainNavigationBarOpenSectionMenu)}`}
aria-haspopup
aria-expanded={isSectionMenuOpen}
onPress={() => {
if (isArrowFocused) {
if (isMenuControlFocused) {
menuButtonOnPress();
}
}}
style={{
pointerEvents: isArrowFocused ? 'auto' : 'none',
opacity: isArrowFocused ? 1 : 0,
pointerEvents: isMenuControlFocused ? 'auto' : 'none',
opacity: isMenuControlFocused ? 1 : 0,
}}
>
<IconChevronLeftRegular
Expand Down

0 comments on commit 90f4593

Please sign in to comment.