diff --git a/packages/gatsby-theme-aio/src/components/Layout/index.js b/packages/gatsby-theme-aio/src/components/Layout/index.js index d897744c5d..d8ff8782b0 100644 --- a/packages/gatsby-theme-aio/src/components/Layout/index.js +++ b/packages/gatsby-theme-aio/src/components/Layout/index.js @@ -324,7 +324,9 @@ export default ({ children, pageContext, location }) => { }, [setShowSearch]); useEffect( () => { - setHasSideNav(false); + if (window.innerWidth >= parseInt(MOBILE_SCREEN_WIDTH)) { + setShowSideNav(false); + } }, [location]); useEffect(() => { @@ -864,6 +866,7 @@ export default ({ children, pageContext, location }) => { `}> { return selectedIndex; }; -const SideNav = ({ mainNavPages, selectedPages, selectedSubPages, setShowSideNav, location }) => { +const SideNav = ({versions, mainNavPages, selectedPages, selectedSubPages, setShowSideNav, location }) => { const [expandedPages, setExpandedPages] = useState([]); const [expandedMenus, setExpandedMenus] = useState([]); const [sideNavClick, setSideNavClick] = useState(false); @@ -325,6 +325,7 @@ const SideNav = ({ mainNavPages, selectedPages, selectedSubPages, setShowSideNav role="tree" aria-label="Global Navigation" className={classNames('spectrum-SideNav', 'spectrum-SideNav--multiLevel')}> + {versions && renderMenuTree([{title: 'Versions', menu: versions}], 1)} {renderMenuTree(mainNavPages, 1)} Console @@ -357,6 +358,7 @@ const SideNav = ({ mainNavPages, selectedPages, selectedSubPages, setShowSideNav SideNav.propTypes = { mainNavPages: PropTypes.array, + versions: PropTypes.array, selectedPages: PropTypes.array, selectedSubPages: PropTypes.array, setShowSideNav: PropTypes.func,