From ef187a0d14db1b9e14ec7bc562ca72091ea01090 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Wed, 20 Nov 2024 16:16:21 -0500
Subject: [PATCH 1/3] match underline style in design, small bug fix

---
 .../NavigationLink/NavigationLink.tsx         | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/app/components/NavigationLink/NavigationLink.tsx b/src/app/components/NavigationLink/NavigationLink.tsx
index 6f693a0..0328089 100644
--- a/src/app/components/NavigationLink/NavigationLink.tsx
+++ b/src/app/components/NavigationLink/NavigationLink.tsx
@@ -11,8 +11,7 @@ export function NavigationLink({
   children,
   onClick,
 }: NavigationLinkProps) {
-  const pathname = usePathname();
-  const isActive = pathname.includes(href.toString());
+  const isActive = useIsActive(href);
 
   return (
     <Link
@@ -23,7 +22,7 @@ export function NavigationLink({
     >
       <span
         className={classNames('text-white', {
-          underline: isActive,
+          'underline underline-offset-8': isActive,
         })}
       >
         {children}
@@ -31,3 +30,18 @@ export function NavigationLink({
     </Link>
   );
 }
+
+function useIsActive(url: NavigationLinkProps['href']) {
+  const pathname = usePathname();
+
+  // top-level match
+  if (pathname === url.toString()) {
+    return true;
+  }
+
+  // child routes also match
+  const pathSegments = pathname.split('/').filter((segment) => segment !== '');
+  if (url.toString().includes(pathSegments[0])) return true;
+
+  return false;
+}

From 3f378b6b2a3ea6409fcb9bffb692a8110bda3023 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Thu, 21 Nov 2024 09:14:09 -0500
Subject: [PATCH 2/3] docs for useisactive

---
 .../components/NavigationLink/NavigationLink.tsx   | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/app/components/NavigationLink/NavigationLink.tsx b/src/app/components/NavigationLink/NavigationLink.tsx
index 0328089..b3d92c5 100644
--- a/src/app/components/NavigationLink/NavigationLink.tsx
+++ b/src/app/components/NavigationLink/NavigationLink.tsx
@@ -31,17 +31,25 @@ export function NavigationLink({
   );
 }
 
+/**
+ * Given a nav Link URL, returns `true` if the current page in the application matches
+ * the navigation Link's URL. If the user is on a subroute of a matching page, that will also match.
+ * @param url URL of the navigation Link
+ * @returns `true` if the current route matches the nav Link's URL, otherwise `false`
+ */
 function useIsActive(url: NavigationLinkProps['href']) {
   const pathname = usePathname();
 
-  // top-level match
+  // top-level route (/products, /case-studies) match
   if (pathname === url.toString()) {
     return true;
   }
 
-  // child routes also match
+  // subroutes (/products/ecr-viewer) match
   const pathSegments = pathname.split('/').filter((segment) => segment !== '');
-  if (url.toString().includes(pathSegments[0])) return true;
+  if (pathSegments.length > 0 && url.toString().includes(pathSegments[0])) {
+    return true;
+  }
 
   return false;
 }

From d13adfdaa1cb2bf910d1e26b48acec9ba87d37e0 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Tue, 10 Dec 2024 12:03:12 -0500
Subject: [PATCH 3/3] use suggested change

---
 .../NavigationLink/NavigationLink.tsx          | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/app/components/NavigationLink/NavigationLink.tsx b/src/app/components/NavigationLink/NavigationLink.tsx
index 3ea73e0..d79a341 100644
--- a/src/app/components/NavigationLink/NavigationLink.tsx
+++ b/src/app/components/NavigationLink/NavigationLink.tsx
@@ -42,17 +42,9 @@ export function NavigationLink({
  */
 function useIsActive(url: NavigationLinkProps['href']) {
   const pathname = usePathname();
-
-  // top-level route (/products, /case-studies) match
-  if (pathname === url.toString()) {
-    return true;
-  }
-
-  // subroutes (/products/ecr-viewer) match
-  const pathSegments = pathname.split('/').filter((segment) => segment !== '');
-  if (pathSegments.length > 0 && url.toString().includes(pathSegments[0])) {
-    return true;
-  }
-
-  return false;
+  const urlStr = url.toString();
+  return (
+    pathname === urlStr ||
+    (pathname.startsWith(urlStr) && (urlStr !== '/' || pathname === '/'))
+  );
 }