PSP-8923: UI UX Clean Up - Left Side Menu - Clicked icon stage

source/frontend/src/assets/scss/_variables.module.scss

@@ -22,6 +22,7 @@
   textWarningColor: $text-warning-color;
   linkColor: $link-color;
   linkHoverColor: $link-hover-color;
+  focusNavbarActionColor: $focus-navbar-action-color;
   activeActionColor: $active-action-color;
   primaryHoverActionColor: $primary-hover-action-color;
   primaryActiveActionColor: $primary-active-action-color;

source/frontend/src/assets/scss/colors.scss

@@ -11,6 +11,7 @@ $pims-blue-100: #053662;
 
 $pims-yellow-10: #fef1d8;
 $pims-yellow-30: #fcba19;
+$pims-yellow-50: #fdb913;
 $pims-yellow-60: #f89725;
 $pims-red-10: #f2dede;
 $pims-red-80: #a12622;
@@ -28,6 +29,7 @@ $pims-green-80: #2e8540;
 
 $active-action-color: $pims-blue-50;
 $hover-action-color: $pims-blue-30;
+$focus-navbar-action-color: $pims-yellow-50;
 $primary-hover-action-color: $pims-blue-90;
 $primary-active-action-color: $pims-blue-100;
 $border-outline-color: $pims-grey-80;

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"