From 630fd7c0a1ee44fa6ce61ac9cb4c76842dc247dd Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Thu, 9 Jan 2025 17:51:14 -0500 Subject: [PATCH] fix: navlink investigation (#16073) 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 --- site/src/components/Sidebar/Sidebar.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx index e478cb09ff..7799ba0384 100644 --- 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 = ({ 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 ( - 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}