Adding highlighted color to selected path on the side Menu

source/frontend/src/components/layout/SideNavBar/NavIcon.tsx

@@ -10,6 +10,7 @@ import useKeycloakWrapper from '@/hooks/useKeycloakWrapper';
 interface INavIconProps {
   icon: React.ReactElement;
   text: string;
+  isNavActive: boolean;
   showText: boolean;
   onClick: () => void;
   roles?: Roles[];
@@ -20,7 +21,15 @@ interface INavIconProps {
  * Component that creates a nav, with an icon, and optional text.
  * @param {INavIconProps} param0
  */
-export const NavIcon = ({ icon, text, showText, onClick, roles, claims }: INavIconProps) => {
+export const NavIcon = ({
+  icon,
+  text,
+  isNavActive,
+  showText,
+  onClick,
+  roles,
+  claims,
+}: INavIconProps) => {
   const { hasRole, hasClaim } = useKeycloakWrapper();
 
   const displayIcon =
@@ -31,11 +40,15 @@ export const NavIcon = ({ icon, text, showText, onClick, roles, claims }: INavIc
       onClick={onClick}
       data-testid={`nav-tooltip-${text.replaceAll(' ', '').toLowerCase()}`}
     >
-      <StyledLink>
+      <StyledLink className={clsx({ active: isNavActive })}>
         <TooltipWrapper tooltipId={`nav-tooltip-${text}`} tooltip={text}>
           {icon}
         </TooltipWrapper>
-        {showText && <StyledLabel className={clsx({ show: showText })}>{text}</StyledLabel>}
+        {showText && (
+          <StyledLabel className={clsx({ show: showText, active: isNavActive })}>
+            {text}
+          </StyledLabel>
+        )}
       </StyledLink>
     </StyledNav>
   ) : null;
@@ -46,10 +59,6 @@ const StyledNav = styled(Nav.Item)`
   margin-bottom: 2rem;
   fill: ${({ theme }) => theme.css.pimsWhite};
 
-  svg {
-    min-width: max-content;
-  }
-
   &:hover {
     label {
       color: ${({ theme }) => theme.css.hoverActionColor};
@@ -65,13 +74,24 @@ const StyledLink = styled(Nav.Link)`
   display: flex;
   flex-direction: row;
   align-items: center;
+
+  svg {
+    fill: white;
+    min-width: max-content;
+  }
+
+  &.active {
+    svg {
+      fill: ${({ theme }) => theme.css.focusNavbarActionColor};
+    }
+  }
 `;
 
 const StyledLabel = styled.label`
   margin-left: 1rem;
   margin-bottom: 0;
-  font-size: 1.2rem;
   color: white;
+  font-size: 1.2rem;
   word-break: break-word;
   white-space: break-spaces;
   transition: width 0.25s;
@@ -82,6 +102,9 @@ const StyledLabel = styled.label`
   &.show {
     width: 100%;
   }
+  &.active {
+    color: ${({ theme }) => theme.css.focusNavbarActionColor};
+  }
 `;
 
 export default NavIcon;

source/frontend/src/components/layout/SideNavBar/SideNavbar.tsx

@@ -1,6 +1,6 @@
 import clsx from 'classnames';
-import { useContext, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useContext, useMemo, useState } from 'react';
+import { matchPath, useHistory, useLocation } from 'react-router-dom';
 
 import AcquisitionFileIcon from '@/assets/images/acquisition-icon.svg?react';
 import AdminIcon from '@/assets/images/admin-icon.svg?react';
@@ -28,6 +28,97 @@ export const SideNavBar = () => {
   const [expanded, setExpanded] = useState(false);
   const { setTrayPage, trayPage } = useContext(SidebarStateContext);
   const history = useHistory();
+  const location = useLocation();
+
+  const isHomeMap = useMemo(
+    () =>
+      matchPath(location.pathname, {
+        path: ['/mapview/sidebar/property/*', '/mapview'],
+        exact: true,
+        strict: true,
+      }),
+    [location],
+  );
+
+  const isProject = useMemo(
+    () =>
+      matchPath(location.pathname, {
+        path: ['/project/*', '/mapview/sidebar/project/*'],
+        exact: true,
+        strict: true,
+      }),
+    [location],
+  );
+
+  const isResearch = useMemo(
+    () =>
+      matchPath(location.pathname, {
+        path: ['/research/*', '/mapview/sidebar/research/*'],
+        exact: true,
+        strict: true,
+      }),
+    [location],
+  );
+
+  const isAcquisition = useMemo(
+    () =>
+      matchPath(location.pathname, {
+        path: ['/acquisition/*', '/mapview/sidebar/acquisition/*'],
+        exact: true,
+        strict: true,
+      }),
+    [location],
+  );
+
+  const isLease = useMemo(
+    () =>
+      matchPath(location.pathname, {
+        path: ['/lease/*', '/mapview/sidebar/lease/*'],
+        exact: true,
+        strict: true,
+      }),
+    [location],
+  );
+
+  const isDisposition = useMemo(
+    () =>
+      matchPath(location.pathname, {
+        path: ['/disposition/*', '/mapview/sidebar/disposition/*'],
+        exact: true,
+        strict: true,
+      }),
+    [location],
+  );
+
+  const isConsSub = useMemo(
+    () =>
+      matchPath(location.pathname, {
+        path: ['/mapview/sidebar/subdivision/*', '/mapview/sidebar/consolidation/*'],
+        exact: true,
+        strict: true,
+      }),
+    [location],
+  );
+
+  const isContacts = useMemo(
+    () =>
+      matchPath(location.pathname, {
+        path: '/contact/*',
+        exact: true,
+        strict: true,
+      }),
+    [location],
+  );
+
+  const isAdminTools = useMemo(
+    () =>
+      matchPath(location.pathname, {
+        path: '/admin/*',
+        exact: true,
+        strict: true,
+      }),
+    [location],
+  );
   return (
     <Styled.ZIndexWrapper>
       <Styled.SideNavBar className={clsx({ expanded: expanded })}>
@@ -38,57 +129,66 @@ export const SideNavBar = () => {
           icon={<HomeIcon />}
           text="Map View"
           showText={expanded}
+          isNavActive={isHomeMap != null}
         />
         <NavIcon
           onClick={() => setTrayPage(SidebarContextType.PROJECT)}
           icon={<ProjectsIcon />}
           text="Project"
           showText={expanded}
           claims={[Claims.PROJECT_VIEW]}
+          isNavActive={isProject != null}
         />
         <NavIcon
           onClick={() => setTrayPage(SidebarContextType.RESEARCH)}
           icon={<ResearchIcon />}
           text="Research"
           showText={expanded}
+          isNavActive={isResearch != null}
         />
         <NavIcon
           onClick={() => setTrayPage(SidebarContextType.ACQUISITION)}
           icon={<AcquisitionFileIcon />}
           text="Acquisition"
           showText={expanded}
+          isNavActive={isAcquisition != null}
         />
         <NavIcon
           onClick={() => setTrayPage(SidebarContextType.LEASE)}
           icon={<LeaseIcon />}
           text="Leases & Licences"
           showText={expanded}
+          isNavActive={isLease != null}
         />
         <NavIcon
           onClick={() => setTrayPage(SidebarContextType.DISPOSITION)}
           icon={<DispositionIcon />}
           text="Disposition"
           showText={expanded}
+          isNavActive={isDisposition != null}
         />
         <NavIcon
           onClick={() => setTrayPage(SidebarContextType.SUBDCONS)}
           icon={<SubdivisionIcon />}
           text="Subdivision & Consolidation"
           showText={expanded}
+          isNavActive={isConsSub != null}
         />
         <NavIcon
           onClick={() => setTrayPage(SidebarContextType.CONTACT)}
           icon={<ContactIcon />}
           text="Contacts"
           showText={expanded}
           claims={[Claims.CONTACT_VIEW]}
+          isNavActive={isContacts != null}
         />
         <NavIcon
           onClick={() => setTrayPage(SidebarContextType.ADMIN)}
           icon={<AdminIcon />}
           text="Admin Tools"
           showText={expanded}
           roles={[Roles.SYSTEM_ADMINISTRATOR]}
+          isNavActive={isAdminTools != null}
         />
         <TooltipWrapper
           tooltipId="expand-navbar"

source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap

@@ -266,7 +266,6 @@ exports[`SideNavbar display and logic > renders 1`] = `
 }
 
 .c1 .nav-item svg {
-  fill: white;
   min-width: 2.4rem;
 }
 
@@ -328,12 +327,6 @@ exports[`SideNavbar display and logic > renders 1`] = `
   fill: #f2f2f2;
 }
 
-.c2 svg {
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
-}
-
 .c2:hover label {
   color: #8ec6ff;
 }
@@ -356,6 +349,17 @@ exports[`SideNavbar display and logic > renders 1`] = `
   align-items: center;
 }
 
+.c3 svg {
+  fill: white;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+}
+
+.c3.active svg {
+  fill: #FDB913;
+}
+
 @media (max-width:1225px) {
   .c6 {
     width: 32rem;

source/frontend/src/components/layout/SideNavBar/styles.ts

@@ -32,7 +32,6 @@ export const SideNavBar = styled.div`
     width: 16rem;
   }
   .nav-item svg {
-    fill: white;
     min-width: 2.4rem;
   }
   .to-bottom {