Determine nav item selection using regex (#1131)

* Determine nav item selection using regex

* Remove regex, simplify

Author: martha

src/components/layout/dashboard/sideNav/navUtil.ts

@@ -72,3 +72,7 @@ export const applySafePaths = <T>(
 
   return config.map((child) => recur(child));
 };
+
+export const addTrailingSlash = (path: string) => {
+  return path.endsWith('/') ? path : path + '/';
+};

src/components/layout/dashboard/sideNav/useItemSelectionStatus.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { NavItem } from './types';
+import { addTrailingSlash } from '@/components/layout/dashboard/sideNav/navUtil';
 import useCurrentPath from '@/hooks/useCurrentPath';
 
 export type Options<T> = {
@@ -15,17 +16,19 @@ export const useItemSelectionStatus = <T extends object>({
   const currentPath = useCurrentPath(); // /projects/:id/foo
 
   const isSelected = useMemo(() => {
-    if (!item.path && !item.activePaths) return false;
-    // If current location starts with item path, then this nav item should be selected.
-    // (e.g. item path is /enrollments/1/services and current location is /enrollments/1/services/2)
-    if (item.path && currentLocation.startsWith(item.path)) {
-      return true;
+    if (item.path) {
+      const matchesPath =
+        currentLocation === item.path || // matches path exactly
+        currentLocation.startsWith(addTrailingSlash(item.path)); // starts with path
+
+      if (matchesPath) return true;
     }
 
     // If current route is listed in this item's activePaths, then this nav item should be selected.
-    if (item.activePaths && item.activePaths.some((p) => p === currentPath)) {
-      return true;
+    if (item.activePaths) {
+      return item.activePaths.some((p) => p === currentPath);
     }
+
     return false;
   }, [item.path, item.activePaths, currentLocation, currentPath]);