fix: navlink investigation

jaaydenh · jaaydenh · commit bc90de9d1008 · 2025-01-08T18:01:26.000Z
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, useLocation } from "react-router-dom";
 import { cn } from "utils/cn";
 
 interface SidebarProps {
@@ -61,6 +61,18 @@ export const SettingsSidebarNavItem: FC<SettingsSidebarNavItemProps> = ({
 	href,
 	end,
 }) => {
+
+	const location = useLocation();
+	if (end) {
+		console.log('Current Path:', location.pathname);
+		console.log('NavLink href:', href);
+	}
+
+	const normalizePath = (path: string) =>
+		path.endsWith('/') ? path.slice(0, -1) : path;
+
+	const isInitiallyActive =
+		normalizePath(location.pathname) === normalizePath(href);
 	return (
 		<NavLink
 			end={end}
@@ -69,7 +81,7 @@ export const SettingsSidebarNavItem: FC<SettingsSidebarNavItemProps> = ({
 				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,
+						"font-semibold text-content-primary": isActive || isInitiallyActive,
 					},
 				)
 			}
