diff --git a/packages/documentation-framework/components/sideNav/sideNav.js b/packages/documentation-framework/components/sideNav/sideNav.js index bf224878c7..f496c64511 100644 --- a/packages/documentation-framework/components/sideNav/sideNav.js +++ b/packages/documentation-framework/components/sideNav/sideNav.js @@ -16,6 +16,8 @@ import { makeSlug } from '../../helpers'; import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl'; import { trackEvent } from '../../helpers'; +const mobileBreakpoint = Number(globalBreakpointXl.value.replace('px', '')); + const getIsActive = (location, section, subsection = null) => { const slug = makeSlug(null, section, null, null, subsection); return location.pathname.startsWith(slug); @@ -24,14 +26,17 @@ const getIsActive = (location, section, subsection = null) => { const defaultValue = 50; const NavItem = ({ text, href, isDeprecated, isBeta, isDemo }) => { - const isMobileView = window.innerWidth < Number.parseInt(globalBreakpointXl.value, 10); return ( - {({ onSidebarToggle, isSidebarOpen }) => ( + {({ onNavToggle, isNavOpen }) => (
  • isMobileView && onSidebarToggle && onSidebarToggle()} + onClick={() => { + if (typeof window !== 'undefined' && onNavToggle && window.innerWidth < mobileBreakpoint) { + onNavToggle(); + } + }} > { className: css('pf-v6-c-nav__link', (isCurrent || pathname.startsWith(href + '/')) && 'pf-m-current') }; }} - tabIndex={isSidebarOpen ? undefined : -1} + tabIndex={isNavOpen ? undefined : -1} > {text}