From 2c9a6a14494c8e4294fe6bfbf9f37b3e017b4a92 Mon Sep 17 00:00:00 2001
From: lbaker <lizbaker.pdx@gmail.com>
Date: Wed, 15 Jul 2020 18:10:21 -0700
Subject: [PATCH] chore: Add auto collapsing to component library subnavs

---
 src/components/NavigationItems.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
index 76b419533..c409f0b4a 100644
--- a/src/components/NavigationItems.js
+++ b/src/components/NavigationItems.js
@@ -1,4 +1,5 @@
 import React, { Fragment, useState, useContext, useEffect } from 'react';
+import usePrevious from '../hooks/usePrevious';
 import PropTypes from 'prop-types';
 import FeatherIcon from './FeatherIcon';
 import NewRelicIcon from './NewRelicIcon';
@@ -85,6 +86,7 @@ const NavIcon = ({ page }) => {
 
 const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
   const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
+  const prevCrumbs = usePrevious(crumbs) ?? [];
   const isHomePage = crumbs.length === 0 && depthLevel === 0;
   const [toggleIsExpanded, setToggleIsExpanded] = useState(false);
   const [overviewIsExpanded, setOverviewIsExpanded] = useState(
@@ -96,7 +98,14 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
     if (page.displayName !== 'Component library') {
       setOverviewIsExpanded(isHomePage || crumbs.includes(page.displayName));
     }
-  }, [isHomePage, page.displayName, crumbs]);
+    if (
+      prevCrumbs[prevCrumbs.length - 1] !== crumbs[crumbs.length - 1] &&
+      !crumbs.includes(page.displayName)
+    ) {
+      setToggleIsExpanded(false);
+      setOverviewIsExpanded(false);
+    }
+  }, [isHomePage, page.displayName, prevCrumbs, crumbs]);
 
   const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
   const isBreadCrumb = crumbs.includes(page.displayName);