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,
};