Jan 9, 2025 · Jan 8, 2025 · Jan 8, 2025 · Jan 8, 2025 · Jan 9, 2025
diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx
 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 {
 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>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 {
Expand DownExpand Up		@@ -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);
jaaydenh marked this conversation as resolved. Show resolvedHide resolved

		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>
Expand Down