fix: navlink investigation (#16073)

jaaydenh · web-flow · commit 630fd7c0a1ee · 2025-01-09T17:51:14.000-05:00
Normally the react router Navlink should normalize the url path and
match with or without a / on the end of the path.

This is a fix to use useMatch() to explicitly see if the current path is
a match to an href to determine whether to apply active styling to the
navlink
diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx
@@ -3,7 +3,7 @@ import type { CSSObject, Interpolation, Theme } from "@emotion/react";
 import { Stack } from "components/Stack/Stack";
 import { type ClassName, useClassName } from "hooks/useClassName";
 import type { ElementType, FC, ReactNode } from "react";
-import { Link, NavLink } from "react-router-dom";
+import { Link, NavLink, useMatch } from "react-router-dom";
 import { cn } from "utils/cn";
 
 interface SidebarProps {
@@ -61,18 +61,19 @@ export const SettingsSidebarNavItem: FC<SettingsSidebarNavItemProps> = ({
 	href,
 	end,
 }) => {
+	// useMatch is necessary to verify if the current path matches the href on the initial render of the route
+	const matchResult = useMatch(href);
+
 	return (
 		<NavLink
 			end={end}
 			to={href}
-			className={({ isActive }) =>
-				cn(
-					"relative text-sm text-content-secondary no-underline font-medium py-2 px-3 hover:bg-surface-secondary rounded-md transition ease-in-out duration-150",
-					{
-						"font-semibold text-content-primary": isActive,
-					},
-				)
-			}
+			className={cn(
+				"relative text-sm text-content-secondary no-underline font-medium py-2 px-3 hover:bg-surface-secondary rounded-md transition ease-in-out duration-150",
+				{
+					"font-semibold text-content-primary": matchResult !== null,
+				},
+			)}
 		>
 			{children}
 		</NavLink>
