DOP-4883: Menu not closing after selection on Mobile (#1254)

mongodb · Oct 1, 2024 · 4e972ca · 4e972ca
1 parent 6943a0a
commit 4e972ca
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Sidenav/Sidenav.js b/src/components/Sidenav/Sidenav.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useMemo } from 'react';
+import React, { useCallback, useContext, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { css, Global } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -7,6 +7,7 @@ import { useViewportSize } from '@leafygreen-ui/hooks';
 import Icon from '@leafygreen-ui/icon';
 import { SideNav as LeafygreenSideNav, SideNavItem } from '@leafygreen-ui/side-nav';
 import { palette } from '@leafygreen-ui/palette';
+import { useLocation } from '@gatsbyjs/reach-router';
 import Link from '../Link';
 import ChapterNumberLabel from '../Chapters/ChapterNumberLabel';
 import VersionDropdown from '../VersionDropdown';
@@ -177,6 +178,7 @@ const Sidenav = ({ chapters, guides, page, pageTitle, repoBranches, slug, eol })
   const viewportSize = useViewportSize();
   const isMobile = viewportSize?.width <= theme.breakpoints.large;
   const { bannerContent } = useContext(HeaderContext);
+  const { pathname } = useLocation();
 
   // CSS top property values for sticky side nav based on header height
   const topValues = useStickyTopValues(false, true, !!bannerContent);
@@ -203,6 +205,11 @@ const Sidenav = ({ chapters, guides, page, pageTitle, repoBranches, slug, eol })
     setHideMobile(true);
   }, [setHideMobile]);
 
+  // close navigation panel on mobile screen, but leaves open if they click on a twisty
+  useEffect(() => {
+    setHideMobile(true);
+  }, [pathname, setHideMobile]);
+
   const { activeToc } = useContext(TocContext);
 
   // Renders side nav content based on the current project and template.