diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js index 9e44dce9f..4003b9edb 100644 --- a/src/components/NavigationItems.js +++ b/src/components/NavigationItems.js @@ -23,15 +23,6 @@ const NavigationItems = ({ searchTerm, depthLevel = 0, }) => { - const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName); - const isHomePage = crumbs.length === 0 && depthLevel === 0; - const iconLibrary = { - 'Collect data': 'collectData', - 'Build apps': 'buildApps', - 'Automate workflows': 'automation', - 'Explore docs': 'developerDocs', - }; - const groupedPages = pages.reduce((groups, page) => { const { group = '' } = page; @@ -52,103 +43,112 @@ const NavigationItems = ({ {showGroup && ( <li className={cx(styles.navLink, styles.groupName)}>{group}</li> )} - {pages.map((page) => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const [isExpanded, setIsExpanded] = useState( - isHomePage || crumbs.includes(page.displayName) - ); + {pages.map((page) => ( + <NavItem + page={page} + depthLevel={depthLevel} + searchTerm={searchTerm} + filteredPageNames={filteredPageNames} + /> + ))} + </Fragment> + ); + }); +}; - const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName; - const headerIcon = depthLevel === 0 && ( - <NewRelicIcon - className={styles.headerIcon} - name={iconLibrary[page.displayName]} - /> - ); - const display = filteredPageNames - ? getHighlightedText(page.displayName, searchTerm) - : page.displayName; +const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => { + const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName); + const isHomePage = crumbs.length === 0 && depthLevel === 0; + + const [isExpanded, setIsExpanded] = useState( + isHomePage || crumbs.includes(page.displayName) + ); + + const iconLibrary = { + 'Collect data': 'collectData', + 'Build apps': 'buildApps', + 'Automate workflows': 'automation', + 'Explore docs': 'developerDocs', + }; + const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName; + const headerIcon = depthLevel === 0 && ( + <NewRelicIcon + className={styles.headerIcon} + name={iconLibrary[page.displayName]} + /> + ); + const display = filteredPageNames + ? getHighlightedText(page.displayName, searchTerm) + : page.displayName; + + if (filteredPageNames && !filteredPageNames.includes(page.displayName)) + return null; - const navItemClasses = cx( + return ( + <li + key={page.displayName} + data-depth={depthLevel} + className={cx( + { [styles.isCurrentPage]: isCurrentPage }, + { [styles.filterOn]: filteredPageNames } + )} + > + {page.url ? ( + <Link + className={cx( { [styles.isCurrentPage]: isCurrentPage }, - { - [styles.notMatchesFilter]: - filteredPageNames && - !filteredPageNames.includes(page.displayName), - }, - { - [styles.matchesFilter]: - filteredPageNames && - filteredPageNames.includes(page.displayName), - }, - { [styles.filterOn]: filteredPageNames } - ); - return ( - <li - key={page.displayName} - data-depth={depthLevel} - className={navItemClasses} - > - {page.url ? ( - <Link - className={cx( - { [styles.isCurrentPage]: isCurrentPage }, - styles.navLink - )} - to={page.url} - > - <span> - {headerIcon} - {display} - </span> - {isCurrentPage && ( - <FeatherIcon - className={styles.currentPageIndicator} - name="chevron-right" - /> - )} - </Link> - ) : ( - <button - type="button" - className={styles.navLink} - onClick={() => setIsExpanded(!isExpanded)} - onKeyPress={() => setIsExpanded(!isExpanded)} - tabIndex={0} - > - {depthLevel > 0 && ( - <FeatherIcon - className={cx( - { [styles.isExpanded]: isExpanded }, - styles.nestedChevron - )} - name="chevron-right" - /> - )} - {headerIcon} - {display} - </button> - )} - {page.children && ( - <ul - className={cx(styles.nestedNav, { - [styles.isExpanded]: isExpanded, - })} - > - <NavigationItems - pages={page.children} - filteredPageNames={filteredPageNames} - depthLevel={depthLevel + 1} - searchTerm={searchTerm} - /> - </ul> + styles.navLink + )} + to={page.url} + > + <span> + {headerIcon} + {display} + </span> + {isCurrentPage && ( + <FeatherIcon + className={styles.currentPageIndicator} + name="chevron-right" + /> + )} + </Link> + ) : ( + <button + type="button" + className={styles.navLink} + onClick={() => setIsExpanded(!isExpanded)} + onKeyPress={() => setIsExpanded(!isExpanded)} + tabIndex={0} + > + {depthLevel > 0 && ( + <FeatherIcon + className={cx( + { [styles.isExpanded]: isExpanded }, + styles.nestedChevron )} - </li> - ); - })} - </Fragment> - ); - }); + name="chevron-right" + /> + )} + {headerIcon} + {display} + </button> + )} + {page.children && ( + <ul + className={cx(styles.nestedNav, { + [styles.isExpanded]: isExpanded, + })} + > + <NavigationItems + pages={page.children} + filteredPageNames={filteredPageNames} + depthLevel={depthLevel + 1} + searchTerm={searchTerm} + /> + </ul> + )} + </li> + ); }; export default NavigationItems; diff --git a/src/components/NavigationItems.module.scss b/src/components/NavigationItems.module.scss index 59a7c120b..516dfb096 100644 --- a/src/components/NavigationItems.module.scss +++ b/src/components/NavigationItems.module.scss @@ -79,14 +79,6 @@ button.navLink { font-weight: bold; } -.notMatchesFilter { - display: none; -} - -.matchesFilter { - display: block; -} - .filterOn { ul { display: block;