OCD-5292 | Navigation and Active State Handling

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 }) {
                 <CmsWrapper>
                   <BrowserWrapper>
                     <AnalyticsProvider>
-                      <CookiesProvider defaultSetOptions={{
-                        path: '/',
-                        expires: new Date(Date.now() + (1000 * 60 * 60 * 10)), // 10 hours
-                        domain: '.healthit.gov',
-                      }}
-                      >
-                        <ChplNavigationTop />
-                        {children}
-                        <ChplNavigationBottom />
-                      </CookiesProvider>
+                      <HashProvider>
+                        <CookiesProvider defaultSetOptions={{
+                          path: '/',
+                          expires: new Date(Date.now() + (1000 * 60 * 60 * 10)), // 10 hours
+                          domain: '.healthit.gov',
+                        }}
+                        >
+                          <ChplNavigationTop />
+                          {children}
+                          <ChplNavigationBottom />
+                        </CookiesProvider>
+                      </HashProvider>
                     </AnalyticsProvider>
                   </BrowserWrapper>
                 </CmsWrapper>

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 (
-    <ListItem className={classes.menuItem} onClick={handleClick}>
+    <ListItem
+      button
+      className={`${classes.menuItem}${href && currentHash === href ? ` ${classes.menuItemActive}` : ''}`}
+      onClick={handleRowClick}
+    >
       <ChplLink
         href={href}
         text={text}
         external={external}
         router={router}
-        indicateOnHover
       />
     </ListItem>
   );

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) => (
                 <Box
                   key={item.key}
-                  className={classes.dropdownItem}
-                  onClick={closeResources}
+                  className={`${classes.dropdownItem}${item.href && currentHash === item.href ? ` ${classes.dropdownItemActive}` : ''}`}
+                  onClick={handleMenuItemClick(item, closeResources)}
                   role="menuitem"
                 >
                   <ChplLink
@@ -344,7 +371,6 @@ function ChplDesktopNav({
                     external={false}
                     router={item.router}
                     icon={getDownloadIcon(item)}
-                    indicateOnHover
                   />
                 </Box>
               ))}
@@ -367,8 +393,8 @@ function ChplDesktopNav({
               { shortcutItems.map((item) => (
                 <Box
                   key={item.key}
-                  className={classes.dropdownItem}
-                  onClick={closeShortcuts}
+                  className={`${classes.dropdownItem}${item.href && currentHash === item.href ? ` ${classes.dropdownItemActive}` : ''}`}
+                  onClick={handleMenuItemClick(item, closeShortcuts)}
                   role="menuitem"
                 >
                   <ChplLink
@@ -377,7 +403,6 @@ function ChplDesktopNav({
                     analytics={getItemAnalytics(item)}
                     external={false}
                     router={item.router}
-                    indicateOnHover
                   />
                 </Box>
               ))}

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 }) {
               <Collapse in={expandedSections[section.key]}>
                 <List disablePadding>
                   { section.items.map((item) => (
-                    <ListItem key={item.key} className={classes.drawerNestedItem} onClick={closeMobileMenu}>
+                    <ListItem
+                      key={item.key}
+                      className={`${classes.drawerNestedItem}${item.href && currentHash === item.href ? ` ${classes.drawerNestedItemActive}` : ''}`}
+                      onClick={closeMobileMenu}
+                    >
                       <ChplLink
                         href={item.href}
                         text={item.text}

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 <HashContext.Provider value={data} {...props} />;
+  /* eslint-enable react/jsx-props-no-spreading */
+}
+
+HashProvider.propTypes = {
+};
+
+function useHashContext() {
+  return useContext(HashContext);
+}
+
+export {
+  HashContext, HashProvider, useHashContext,
+};

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