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 90def2ac07..0ebedd366f 100755 --- a/src/app/components/login/navigation/admin-menu-link-item.jsx +++ b/src/app/components/login/navigation/admin-menu-link-item.jsx @@ -12,21 +12,33 @@ import { import { ChplLink } from 'components/util'; import { eventTrack } from 'services/analytics.service'; -import { useAnalyticsContext } from 'shared/contexts'; +import { useAnalyticsContext, useHashContext } from 'shared/contexts'; import { palette } from 'themes'; const useStyles = makeStyles({ menuItem: { + cursor: 'pointer', padding: '8px 16px 8px 32px', color: palette.primary, fontSize: '14px', + '&:hover': { + backgroundColor: palette.secondary, + }, '& a': { - color: `${palette.primary} !important`, + color: palette.primary, + textDecoration: 'none', }, '& .MuiSvgIcon-root': { color: palette.primary, }, }, + menuItemActive: { + '& a': { + color: palette.black, + fontWeight: 'bold', + textDecoration: 'none', + }, + }, }); function ChplAdminMenuLinkItem({ @@ -36,26 +48,34 @@ function ChplAdminMenuLinkItem({ router = undefined, text, }) { - const classes = useStyles(); + const { currentHash } = useHashContext(); const { analytics } = useAnalyticsContext(); + const classes = useStyles(); - const handleClick = () => { + const handleRowClick = (event) => { eventTrack({ ...analytics, event: `Go to ${text} Page`, category: 'Navigation', }); onClose(); + if (event.target.tagName === 'A') { + return; + } + window.location.href = href; }; return ( - + ); diff --git a/src/app/navigation/desktop-nav.jsx b/src/app/navigation/desktop-nav.jsx index 8b7c9625d9..8cc02843e3 100644 --- a/src/app/navigation/desktop-nav.jsx +++ b/src/app/navigation/desktop-nav.jsx @@ -23,11 +23,13 @@ import { 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 { CmsContext, CompareContext, UserContext, useAnalyticsContext, + useHashContext, } from 'shared/contexts'; import { palette, theme } from 'themes'; @@ -83,15 +85,27 @@ const useStyles = makeStyles({ padding: '8px 0', }, dropdownItem: { + cursor: 'pointer', padding: '6px 16px', whiteSpace: 'nowrap', + '&:hover': { + backgroundColor: palette.secondary, + }, '& span': { display: 'flex', alignItems: 'center', gap: '8px', }, '& a': { - color: `${palette.primary} !important`, + color: palette.primary, + textDecoration: 'none', + }, + }, + dropdownItemActive: { + '& a': { + color: palette.black, + fontWeight: 'bold', + textDecoration: 'none', }, }, }); @@ -112,6 +126,7 @@ function ChplDesktopNav({ const [compareAnchorEl, setCompareAnchorEl] = useState(null); const [resourcesOpen, setResourcesOpen] = useState(false); const [shortcutsOpen, setShortcutsOpen] = useState(false); + const { currentHash } = useHashContext(); const resourceItems = getResourceItems({ includeDeveloperGuide: hasAnyRole(developerGuideRoles) }); const classes = useStyles(); @@ -233,6 +248,18 @@ 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); + } + window.location.href = item.href; + }; + const getDownloadIcon = (item) => { if (!item.showDownloadIcon) { return undefined; @@ -333,8 +360,8 @@ function ChplDesktopNav({ { resourceItems.map((item) => ( ))} @@ -367,8 +393,8 @@ function ChplDesktopNav({ { shortcutItems.map((item) => ( ))} diff --git a/src/app/navigation/mobile-nav-drawer.jsx b/src/app/navigation/mobile-nav-drawer.jsx index 1e92125f0d..2e115edd07 100644 --- a/src/app/navigation/mobile-nav-drawer.jsx +++ b/src/app/navigation/mobile-nav-drawer.jsx @@ -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({ @@ -54,10 +54,27 @@ const useStyles = makeStyles({ }, drawerItem: { color: palette.greyDark, + '&:hover': { + backgroundColor: palette.secondary, + }, }, drawerNestedItem: { color: palette.greyDark, + cursor: 'pointer', paddingLeft: '32px', + '&:hover': { + backgroundColor: palette.secondary, + }, + '& a': { + textDecoration: 'none', + }, + }, + drawerNestedItemActive: { + '& a': { + color: palette.black, + fontWeight: 'bold', + textDecoration: 'none', + }, }, drawerDivider: { backgroundColor: palette.divider, @@ -88,9 +105,10 @@ const useStyles = makeStyles({ }); function ChplMobileNavDrawer({ onHomeClick, onSearchClick }) { - const { hasAnyRole } = useContext(UserContext); const { analytics } = useAnalyticsContext(); + const { hasAnyRole } = useContext(UserContext); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); + const { currentHash } = useHashContext(); const [expandedSections, setExpandedSections] = useState({ cms: false, compare: false, @@ -211,7 +229,11 @@ function ChplMobileNavDrawer({ onHomeClick, onSearchClick }) { { section.items.map((item) => ( - + { + 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, };