From fa4ae965acbbb0b6da15f9270a388ce7d8ef4c86 Mon Sep 17 00:00:00 2001 From: Matthew Stankiewicz Date: Wed, 24 Jun 2026 12:30:58 -0400 Subject: [PATCH 1/7] feat: Allow navigating by clicking anywhere in nav menu item row [#OCD-5292] --- src/app/navigation/desktop-nav.jsx | 26 ++++++++++++++++++---- src/app/navigation/mobile-nav-drawer.jsx | 28 ++++++++++++++++++++++-- 2 files changed, 48 insertions(+), 6 deletions(-) diff --git a/src/app/navigation/desktop-nav.jsx b/src/app/navigation/desktop-nav.jsx index d794f1595c..f194b933cb 100644 --- a/src/app/navigation/desktop-nav.jsx +++ b/src/app/navigation/desktop-nav.jsx @@ -24,6 +24,7 @@ import ChplCmsDisplay from 'components/cms-widget/cms-display'; import ChplCompareDisplay from 'components/compare-widget/compare-display'; import { ChplLink } from 'components/util'; import { getAngularService } from 'services/angular-react-helper'; +import { eventTrack } from 'services/analytics.service'; import { UserContext, useAnalyticsContext } from 'shared/contexts'; import { palette, theme } from 'themes'; @@ -79,6 +80,7 @@ const useStyles = makeStyles({ padding: '8px 0', }, dropdownItem: { + cursor: 'pointer', padding: '6px 16px', whiteSpace: 'nowrap', '& span': { @@ -97,6 +99,7 @@ function ChplDesktopNav({ onSearchClick, }) { const $rootScope = getAngularService('$rootScope'); + const $state = getAngularService('$state'); const analytics = useAnalyticsContext(); const { hasAnyRole } = useContext(UserContext); const cmsButtonRef = useRef(null); @@ -148,7 +151,7 @@ function ChplDesktopNav({ if (!anchor) { return; } - setCmsAnchorEl(null); + setCmsAnchorEl(null); setResourcesOpen(false); setShortcutsOpen(false); setCompareAnchorEl(anchor); @@ -213,7 +216,6 @@ function ChplDesktopNav({ setCompareAnchorEl(null); }; - const toggleResources = () => { setResourcesOpen((prev) => { const next = !prev; @@ -248,6 +250,22 @@ function ChplDesktopNav({ category: item.analyticsCategory ?? 'Navigation', }); + const handleMenuItemClick = (item, closeMenu) => (event) => { + closeMenu(); + if (event.target.tagName === 'A') { + return; + } + const itemAnalytics = getItemAnalytics(item); + if (itemAnalytics.event) { + eventTrack(itemAnalytics); + } + if (item.router && item.router.sref) { + $state.go(item.router.sref, item.router.options); + } else { + window.location.href = item.href; + } + }; + const getDownloadIcon = (item) => { if (!item.showDownloadIcon) { return undefined; @@ -355,7 +373,7 @@ function ChplDesktopNav({ (event) => { + closeMobileMenu(); + if (event.target.tagName === 'A') { + return; + } + const itemAnalytics = { + ...analytics, + event: item.analyticsEvent, + category: item.analyticsCategory ?? 'Navigation', + }; + if (itemAnalytics.event) { + eventTrack(itemAnalytics); + } + if (item.router && item.router.sref) { + $state.go(item.router.sref, item.router.options); + } else { + window.location.href = item.href; + } + }; + const widgetSections = [{ key: 'cms', title: 'CMS ID Creator', @@ -197,7 +221,7 @@ function ChplMobileNavDrawer({ onHomeClick, onSearchClick }) { { section.items.map((item) => ( - + Date: Wed, 24 Jun 2026 14:52:55 -0400 Subject: [PATCH 2/7] feat!: Enhance navigation components with full bar selection, active link highlighting and hover effects [#OCD-5292] --- .../login/navigation/admin-menu-link-item.jsx | 29 ++++++++++++-- src/app/navigation/desktop-nav.jsx | 22 +++++++++-- src/app/navigation/mobile-nav-drawer.jsx | 38 ++++++++++++++++++- 3 files changed, 80 insertions(+), 9 deletions(-) diff --git a/src/app/components/login/navigation/admin-menu-link-item.jsx b/src/app/components/login/navigation/admin-menu-link-item.jsx index 45865a2b56..407f892a71 100755 --- a/src/app/components/login/navigation/admin-menu-link-item.jsx +++ b/src/app/components/login/navigation/admin-menu-link-item.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { ListItem, makeStyles, @@ -11,20 +11,33 @@ import { } from 'prop-types'; import { ChplLink } from 'components/util'; +import { getAngularService } from 'services/angular-react-helper'; import { palette } from 'themes'; const useStyles = makeStyles({ menuItem: { + cursor: 'pointer', padding: '8px 16px 8px 32px', color: palette.primary, fontSize: '14px', + '&:hover': { + backgroundColor: `${palette.secondary} !important`, + }, '& a': { color: `${palette.primary} !important`, + textDecoration: 'none !important', }, '& .MuiSvgIcon-root': { color: palette.primary, }, }, + menuItemActive: { + '& a': { + color: `${palette.black} !important`, + fontWeight: 'bold !important', + textDecoration: 'none !important', + }, + }, }); function ChplAdminMenuLinkItem({ @@ -34,16 +47,26 @@ function ChplAdminMenuLinkItem({ router = undefined, text, }) { + const $rootScope = getAngularService('$rootScope'); + const [currentHash, setCurrentHash] = useState(window.location.hash); const classes = useStyles(); + useEffect(() => { + const deregister = $rootScope.$on('$locationChangeSuccess', () => { + setCurrentHash(window.location.hash); + }); + return () => deregister(); + }, [$rootScope]); + + const isActive = href && currentHash === href; + return ( - + ); diff --git a/src/app/navigation/desktop-nav.jsx b/src/app/navigation/desktop-nav.jsx index f194b933cb..c38d80b2dc 100644 --- a/src/app/navigation/desktop-nav.jsx +++ b/src/app/navigation/desktop-nav.jsx @@ -83,6 +83,9 @@ const useStyles = makeStyles({ cursor: 'pointer', padding: '6px 16px', whiteSpace: 'nowrap', + '&:hover': { + backgroundColor: palette.secondary, + }, '& span': { display: 'flex', alignItems: 'center', @@ -90,6 +93,14 @@ const useStyles = makeStyles({ }, '& a': { color: `${palette.primary} !important`, + textDecoration: 'none !important', + }, + }, + dropdownItemActive: { + '& a': { + color: `${palette.black} !important`, + fontWeight: 'bold !important', + textDecoration: 'none !important', }, }, }); @@ -110,6 +121,7 @@ function ChplDesktopNav({ const [compareAnchorEl, setCompareAnchorEl] = useState(null); const [resourcesOpen, setResourcesOpen] = useState(false); const [shortcutsOpen, setShortcutsOpen] = useState(false); + const [currentHash, setCurrentHash] = useState(window.location.hash); const resourceItems = getResourceItems({ includeDeveloperGuide: hasAnyRole(developerGuideRoles), }); @@ -159,11 +171,15 @@ function ChplDesktopNav({ const deregisterHideCompareWidget = $rootScope.$on('HideCompareWidget', () => { setCompareAnchorEl(null); }); + const deregisterStateChange = $rootScope.$on('$locationChangeSuccess', () => { + setCurrentHash(window.location.hash); + }); return () => { deregisterShowCmsWidget(); deregisterHideCmsWidget(); deregisterShowCompareWidget(); deregisterHideCompareWidget(); + deregisterStateChange(); }; }, [$rootScope]); @@ -372,7 +388,7 @@ function ChplDesktopNav({ { resourceItems.map((item) => ( @@ -383,7 +399,6 @@ function ChplDesktopNav({ external={false} router={item.router} icon={getDownloadIcon(item)} - indicateOnHover /> ))} @@ -406,7 +421,7 @@ function ChplDesktopNav({ { shortcutItems.map((item) => ( @@ -416,7 +431,6 @@ function ChplDesktopNav({ analytics={getItemAnalytics(item)} external={false} router={item.router} - indicateOnHover /> ))} diff --git a/src/app/navigation/mobile-nav-drawer.jsx b/src/app/navigation/mobile-nav-drawer.jsx index 6802e8b21e..f8de59b5d6 100644 --- a/src/app/navigation/mobile-nav-drawer.jsx +++ b/src/app/navigation/mobile-nav-drawer.jsx @@ -1,4 +1,4 @@ -import React, { useContext, useState } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import { Box, Collapse, @@ -55,10 +55,27 @@ const useStyles = makeStyles({ }, drawerItem: { color: palette.greyDark, + '&:hover': { + backgroundColor: `${palette.secondary} !important`, + }, }, drawerNestedItem: { color: palette.greyDark, + cursor: 'pointer', paddingLeft: '32px', + '&:hover': { + backgroundColor: `${palette.secondary} !important`, + }, + '& a': { + textDecoration: 'none !important', + }, + }, + drawerNestedItemActive: { + '& a': { + color: `${palette.black} !important`, + fontWeight: 'bold !important', + textDecoration: 'none !important', + }, }, drawerDivider: { backgroundColor: palette.divider, @@ -93,6 +110,7 @@ function ChplMobileNavDrawer({ onHomeClick, onSearchClick }) { const analytics = useAnalyticsContext(); const { hasAnyRole } = useContext(UserContext); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); + const [currentHash, setCurrentHash] = useState(window.location.hash); const [expandedSections, setExpandedSections] = useState({ cms: false, compare: false, @@ -108,6 +126,17 @@ function ChplMobileNavDrawer({ onHomeClick, onSearchClick }) { setMobileMenuOpen(false); }; + const $rootScope = getAngularService('$rootScope'); + + useEffect(() => { + const deregisterStateChange = $rootScope.$on('$locationChangeSuccess', () => { + setCurrentHash(window.location.hash); + }); + return () => { + deregisterStateChange(); + }; + }, [$rootScope]); + const handleHomeClick = () => { onHomeClick(); closeMobileMenu(); @@ -221,7 +250,12 @@ function ChplMobileNavDrawer({ onHomeClick, onSearchClick }) { { section.items.map((item) => ( - + Date: Thu, 25 Jun 2026 10:04:38 -0400 Subject: [PATCH 3/7] fix: Make admin menu link rows fully clickable with navigation [#OCD-5292] --- .../login/navigation/admin-menu-link-item.jsx | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/app/components/login/navigation/admin-menu-link-item.jsx b/src/app/components/login/navigation/admin-menu-link-item.jsx index 407f892a71..8c99ba68e5 100755 --- a/src/app/components/login/navigation/admin-menu-link-item.jsx +++ b/src/app/components/login/navigation/admin-menu-link-item.jsx @@ -12,6 +12,8 @@ import { import { ChplLink } from 'components/util'; import { getAngularService } from 'services/angular-react-helper'; +import { eventTrack } from 'services/analytics.service'; +import { useAnalyticsContext } from 'shared/contexts'; import { palette } from 'themes'; const useStyles = makeStyles({ @@ -48,6 +50,8 @@ function ChplAdminMenuLinkItem({ text, }) { const $rootScope = getAngularService('$rootScope'); + const $state = getAngularService('$state'); + const analytics = useAnalyticsContext(); const [currentHash, setCurrentHash] = useState(window.location.hash); const classes = useStyles(); @@ -60,8 +64,27 @@ function ChplAdminMenuLinkItem({ const isActive = href && currentHash === href; + const handleRowClick = (event) => { + onClose(); + if (event.target.tagName === 'A') { + return; + } + if (analytics.event) { + eventTrack(analytics); + } + if (router && router.sref) { + $state.go(router.sref, router.options); + } else { + window.location.href = href; + } + }; + return ( - + Date: Thu, 25 Jun 2026 12:31:19 -0400 Subject: [PATCH 4/7] fix: Remove AngularJS dependencies from admin menu link item [#OCD-5292] --- .../login/navigation/admin-menu-link-item.jsx | 34 ++++++------------- 1 file changed, 10 insertions(+), 24 deletions(-) diff --git a/src/app/components/login/navigation/admin-menu-link-item.jsx b/src/app/components/login/navigation/admin-menu-link-item.jsx index 8c99ba68e5..29a17b1ef0 100755 --- a/src/app/components/login/navigation/admin-menu-link-item.jsx +++ b/src/app/components/login/navigation/admin-menu-link-item.jsx @@ -11,9 +11,6 @@ import { } from 'prop-types'; import { ChplLink } from 'components/util'; -import { getAngularService } from 'services/angular-react-helper'; -import { eventTrack } from 'services/analytics.service'; -import { useAnalyticsContext } from 'shared/contexts'; import { palette } from 'themes'; const useStyles = makeStyles({ @@ -26,8 +23,8 @@ const useStyles = makeStyles({ backgroundColor: `${palette.secondary} !important`, }, '& a': { - color: `${palette.primary} !important`, - textDecoration: 'none !important', + color: palette.primary, + textDecoration: 'none', }, '& .MuiSvgIcon-root': { color: palette.primary, @@ -35,9 +32,9 @@ const useStyles = makeStyles({ }, menuItemActive: { '& a': { - color: `${palette.black} !important`, - fontWeight: 'bold !important', - textDecoration: 'none !important', + color: palette.black, + fontWeight: 'bold', + textDecoration: 'none', }, }, }); @@ -49,18 +46,14 @@ function ChplAdminMenuLinkItem({ router = undefined, text, }) { - const $rootScope = getAngularService('$rootScope'); - const $state = getAngularService('$state'); - const analytics = useAnalyticsContext(); const [currentHash, setCurrentHash] = useState(window.location.hash); const classes = useStyles(); useEffect(() => { - const deregister = $rootScope.$on('$locationChangeSuccess', () => { - setCurrentHash(window.location.hash); - }); - return () => deregister(); - }, [$rootScope]); + const handleHashChange = () => setCurrentHash(window.location.hash); + window.addEventListener('hashchange', handleHashChange); + return () => window.removeEventListener('hashchange', handleHashChange); + }, []); const isActive = href && currentHash === href; @@ -69,14 +62,7 @@ function ChplAdminMenuLinkItem({ if (event.target.tagName === 'A') { return; } - if (analytics.event) { - eventTrack(analytics); - } - if (router && router.sref) { - $state.go(router.sref, router.options); - } else { - window.location.href = href; - } + window.location.href = href; }; return ( From bb0a7cee0a21a308355e5ae9a0fc4dba0ad630e9 Mon Sep 17 00:00:00 2001 From: Matthew Stankiewicz Date: Mon, 29 Jun 2026 10:08:57 -0400 Subject: [PATCH 5/7] refactor: Simplify navigation components by removing AngularJS dependencies and updating link styles [#OCD-5292] --- src/app/navigation/desktop-nav.jsx | 27 ++++++++++------------ src/app/navigation/mobile-nav-drawer.jsx | 29 ++++++++---------------- 2 files changed, 21 insertions(+), 35 deletions(-) diff --git a/src/app/navigation/desktop-nav.jsx b/src/app/navigation/desktop-nav.jsx index c38d80b2dc..3406daa502 100644 --- a/src/app/navigation/desktop-nav.jsx +++ b/src/app/navigation/desktop-nav.jsx @@ -92,15 +92,15 @@ const useStyles = makeStyles({ gap: '8px', }, '& a': { - color: `${palette.primary} !important`, - textDecoration: 'none !important', + color: palette.primary, + textDecoration: 'none', }, }, dropdownItemActive: { '& a': { - color: `${palette.black} !important`, - fontWeight: 'bold !important', - textDecoration: 'none !important', + color: palette.black, + fontWeight: 'bold', + textDecoration: 'none', }, }, }); @@ -110,7 +110,6 @@ function ChplDesktopNav({ onSearchClick, }) { const $rootScope = getAngularService('$rootScope'); - const $state = getAngularService('$state'); const analytics = useAnalyticsContext(); const { hasAnyRole } = useContext(UserContext); const cmsButtonRef = useRef(null); @@ -171,18 +170,20 @@ function ChplDesktopNav({ const deregisterHideCompareWidget = $rootScope.$on('HideCompareWidget', () => { setCompareAnchorEl(null); }); - const deregisterStateChange = $rootScope.$on('$locationChangeSuccess', () => { - setCurrentHash(window.location.hash); - }); return () => { deregisterShowCmsWidget(); deregisterHideCmsWidget(); deregisterShowCompareWidget(); deregisterHideCompareWidget(); - deregisterStateChange(); }; }, [$rootScope]); + useEffect(() => { + const handleHashChange = () => setCurrentHash(window.location.hash); + window.addEventListener('hashchange', handleHashChange); + return () => window.removeEventListener('hashchange', handleHashChange); + }, []); + const closeAllNavOverlays = () => { setCmsAnchorEl(null); setCompareAnchorEl(null); @@ -275,11 +276,7 @@ function ChplDesktopNav({ if (itemAnalytics.event) { eventTrack(itemAnalytics); } - if (item.router && item.router.sref) { - $state.go(item.router.sref, item.router.options); - } else { - window.location.href = item.href; - } + window.location.href = item.href; }; const getDownloadIcon = (item) => { diff --git a/src/app/navigation/mobile-nav-drawer.jsx b/src/app/navigation/mobile-nav-drawer.jsx index f8de59b5d6..05adec4da2 100644 --- a/src/app/navigation/mobile-nav-drawer.jsx +++ b/src/app/navigation/mobile-nav-drawer.jsx @@ -26,7 +26,6 @@ import { import ChplCmsDisplay from 'components/cms-widget/cms-display'; import ChplCompareDisplay from 'components/compare-widget/compare-display'; import { ChplLink } from 'components/util'; -import { getAngularService } from 'services/angular-react-helper'; import { eventTrack } from 'services/analytics.service'; import { UserContext, useAnalyticsContext } from 'shared/contexts'; import { palette, theme } from 'themes'; @@ -67,14 +66,14 @@ const useStyles = makeStyles({ backgroundColor: `${palette.secondary} !important`, }, '& a': { - textDecoration: 'none !important', + textDecoration: 'none', }, }, drawerNestedItemActive: { '& a': { - color: `${palette.black} !important`, - fontWeight: 'bold !important', - textDecoration: 'none !important', + color: palette.black, + fontWeight: 'bold', + textDecoration: 'none', }, }, drawerDivider: { @@ -106,7 +105,6 @@ const useStyles = makeStyles({ }); function ChplMobileNavDrawer({ onHomeClick, onSearchClick }) { - const $state = getAngularService('$state'); const analytics = useAnalyticsContext(); const { hasAnyRole } = useContext(UserContext); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); @@ -126,16 +124,11 @@ function ChplMobileNavDrawer({ onHomeClick, onSearchClick }) { setMobileMenuOpen(false); }; - const $rootScope = getAngularService('$rootScope'); - useEffect(() => { - const deregisterStateChange = $rootScope.$on('$locationChangeSuccess', () => { - setCurrentHash(window.location.hash); - }); - return () => { - deregisterStateChange(); - }; - }, [$rootScope]); + const handleHashChange = () => setCurrentHash(window.location.hash); + window.addEventListener('hashchange', handleHashChange); + return () => window.removeEventListener('hashchange', handleHashChange); + }, []); const handleHomeClick = () => { onHomeClick(); @@ -167,11 +160,7 @@ function ChplMobileNavDrawer({ onHomeClick, onSearchClick }) { if (itemAnalytics.event) { eventTrack(itemAnalytics); } - if (item.router && item.router.sref) { - $state.go(item.router.sref, item.router.options); - } else { - window.location.href = item.href; - } + window.location.href = item.href; }; const widgetSections = [{ From a4a5322bde8e338e59c668409abb01ca494a0e33 Mon Sep 17 00:00:00 2001 From: Matthew Stankiewicz Date: Thu, 2 Jul 2026 10:11:48 -0400 Subject: [PATCH 6/7] fix: Destructure analytics from useAnalyticsContext for clarity [#OCD-5292] --- src/app/navigation/mobile-nav-drawer.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/navigation/mobile-nav-drawer.jsx b/src/app/navigation/mobile-nav-drawer.jsx index 05adec4da2..c52d2b6a7e 100644 --- a/src/app/navigation/mobile-nav-drawer.jsx +++ b/src/app/navigation/mobile-nav-drawer.jsx @@ -105,7 +105,7 @@ const useStyles = makeStyles({ }); function ChplMobileNavDrawer({ onHomeClick, onSearchClick }) { - const analytics = useAnalyticsContext(); + const { analytics } = useAnalyticsContext(); const { hasAnyRole } = useContext(UserContext); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [currentHash, setCurrentHash] = useState(window.location.hash); From 545fddde4472a6d698f806ebfbcb9439645d306c Mon Sep 17 00:00:00 2001 From: Matthew Stankiewicz Date: Mon, 13 Jul 2026 10:53:38 -0400 Subject: [PATCH 7/7] feat: add HashContext and refactor components to use hash-based navigation & take out important on styles [#OCD-5292] --- src/app/app-wrapper.jsx | 24 ++++++----- .../login/navigation/admin-menu-link-item.jsx | 17 +++----- src/app/navigation/desktop-nav.jsx | 9 +---- src/app/navigation/mobile-nav-drawer.jsx | 16 +++----- src/app/shared/contexts/hash-context.jsx | 40 +++++++++++++++++++ src/app/shared/contexts/index.js | 4 ++ 6 files changed, 69 insertions(+), 41 deletions(-) create mode 100644 src/app/shared/contexts/hash-context.jsx diff --git a/src/app/app-wrapper.jsx b/src/app/app-wrapper.jsx index d2600e1d7d..041b0e9f0f 100755 --- a/src/app/app-wrapper.jsx +++ b/src/app/app-wrapper.jsx @@ -7,7 +7,7 @@ import { import { bool, node } from 'prop-types'; import { CookiesProvider } from 'react-cookie'; -import { AnalyticsProvider } from 'shared/contexts'; +import { AnalyticsProvider, HashProvider } from 'shared/contexts'; import ApiWrapper from 'api/api-wrapper'; import BrowserWrapper from 'components/browser/browser-wrapper'; import CmsWrapper from 'components/cms-widget/cms-wrapper'; @@ -30,16 +30,18 @@ function AppWrapper({ children, showQueryTools = DEVELOPER_MODE }) { - - - {children} - - + + + + {children} + + + diff --git a/src/app/components/login/navigation/admin-menu-link-item.jsx b/src/app/components/login/navigation/admin-menu-link-item.jsx index 29a17b1ef0..7d3630c358 100755 --- a/src/app/components/login/navigation/admin-menu-link-item.jsx +++ b/src/app/components/login/navigation/admin-menu-link-item.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React from 'react'; import { ListItem, makeStyles, @@ -11,6 +11,7 @@ import { } from 'prop-types'; import { ChplLink } from 'components/util'; +import { useHashContext } from 'shared/contexts'; import { palette } from 'themes'; const useStyles = makeStyles({ @@ -20,7 +21,7 @@ const useStyles = makeStyles({ color: palette.primary, fontSize: '14px', '&:hover': { - backgroundColor: `${palette.secondary} !important`, + backgroundColor: palette.secondary, }, '& a': { color: palette.primary, @@ -46,17 +47,9 @@ function ChplAdminMenuLinkItem({ router = undefined, text, }) { - const [currentHash, setCurrentHash] = useState(window.location.hash); + const { currentHash } = useHashContext(); const classes = useStyles(); - useEffect(() => { - const handleHashChange = () => setCurrentHash(window.location.hash); - window.addEventListener('hashchange', handleHashChange); - return () => window.removeEventListener('hashchange', handleHashChange); - }, []); - - const isActive = href && currentHash === href; - const handleRowClick = (event) => { onClose(); if (event.target.tagName === 'A') { @@ -68,7 +61,7 @@ function ChplAdminMenuLinkItem({ return ( { - const handleHashChange = () => setCurrentHash(window.location.hash); - window.addEventListener('hashchange', handleHashChange); - return () => window.removeEventListener('hashchange', handleHashChange); - }, []); - const closeAllNavOverlays = () => { setCmsAnchorEl(null); setCmsIsOpen(false); diff --git a/src/app/navigation/mobile-nav-drawer.jsx b/src/app/navigation/mobile-nav-drawer.jsx index c52d2b6a7e..ab1881e66b 100644 --- a/src/app/navigation/mobile-nav-drawer.jsx +++ b/src/app/navigation/mobile-nav-drawer.jsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext, useState } from 'react'; import { Box, Collapse, @@ -27,7 +27,7 @@ import ChplCmsDisplay from 'components/cms-widget/cms-display'; import ChplCompareDisplay from 'components/compare-widget/compare-display'; import { ChplLink } from 'components/util'; import { eventTrack } from 'services/analytics.service'; -import { UserContext, useAnalyticsContext } from 'shared/contexts'; +import { UserContext, useAnalyticsContext, useHashContext } from 'shared/contexts'; import { palette, theme } from 'themes'; const useStyles = makeStyles({ @@ -55,7 +55,7 @@ const useStyles = makeStyles({ drawerItem: { color: palette.greyDark, '&:hover': { - backgroundColor: `${palette.secondary} !important`, + backgroundColor: palette.secondary, }, }, drawerNestedItem: { @@ -63,7 +63,7 @@ const useStyles = makeStyles({ cursor: 'pointer', paddingLeft: '32px', '&:hover': { - backgroundColor: `${palette.secondary} !important`, + backgroundColor: palette.secondary, }, '& a': { textDecoration: 'none', @@ -108,7 +108,7 @@ function ChplMobileNavDrawer({ onHomeClick, onSearchClick }) { const { analytics } = useAnalyticsContext(); const { hasAnyRole } = useContext(UserContext); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); - const [currentHash, setCurrentHash] = useState(window.location.hash); + const { currentHash } = useHashContext(); const [expandedSections, setExpandedSections] = useState({ cms: false, compare: false, @@ -124,12 +124,6 @@ function ChplMobileNavDrawer({ onHomeClick, onSearchClick }) { setMobileMenuOpen(false); }; - useEffect(() => { - const handleHashChange = () => setCurrentHash(window.location.hash); - window.addEventListener('hashchange', handleHashChange); - return () => window.removeEventListener('hashchange', handleHashChange); - }, []); - const handleHomeClick = () => { onHomeClick(); closeMobileMenu(); diff --git a/src/app/shared/contexts/hash-context.jsx b/src/app/shared/contexts/hash-context.jsx new file mode 100644 index 0000000000..cfa2b96ab5 --- /dev/null +++ b/src/app/shared/contexts/hash-context.jsx @@ -0,0 +1,40 @@ +import React, { + createContext, + useContext, + useEffect, + useState, +} from 'react'; + +const HashContext = createContext({ + currentHash: '', +}); +HashContext.displayName = 'hash-context'; + +function HashProvider(props) { + const [currentHash, setCurrentHash] = useState(window.location.hash); + + useEffect(() => { + const handleHashChange = () => setCurrentHash(window.location.hash); + window.addEventListener('hashchange', handleHashChange); + return () => window.removeEventListener('hashchange', handleHashChange); + }, []); + + const data = { + currentHash, + }; + + /* eslint-disable react/jsx-props-no-spreading */ + return ; + /* eslint-enable react/jsx-props-no-spreading */ +} + +HashProvider.propTypes = { +}; + +function useHashContext() { + return useContext(HashContext); +} + +export { + HashContext, HashProvider, useHashContext, +}; diff --git a/src/app/shared/contexts/index.js b/src/app/shared/contexts/index.js index 1ede28d550..4c71752227 100755 --- a/src/app/shared/contexts/index.js +++ b/src/app/shared/contexts/index.js @@ -6,6 +6,7 @@ import CompareContext from './compare-context'; import CriterionContext from './criterion-context'; import DeveloperContext from './developer-context'; import FlagContext from './flag-context'; +import { HashContext, HashProvider, useHashContext } from './hash-context'; import ListingContext from './listing-context'; import PendingListingContext from './pending-listing-context'; import UserContext from './user-context'; @@ -20,8 +21,11 @@ export { CriterionContext, DeveloperContext, FlagContext, + HashContext, + HashProvider, ListingContext, PendingListingContext, UserContext, useAnalyticsContext, + useHashContext, };