From bc90de9d1008cc2979f5abdec0be94da8fb63058 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 8 Jan 2025 18:01:26 +0000
Subject: [PATCH 1/4] fix: navlink investigation

---
 site/src/components/Sidebar/Sidebar.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx
index e478cb09ff6eb..b072396dbf817 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, 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,
 					},
 				)
 			}

From 578712ca59e6d4bb7f744e1e9b9add60b44f26f7 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 8 Jan 2025 21:22:16 +0000
Subject: [PATCH 2/4] fix: useMatch to apply active styling

---
 site/src/components/Sidebar/Sidebar.tsx | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx
index b072396dbf817..3752c16b5cd1c 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, useLocation } from "react-router-dom";
+import { Link, NavLink, useMatch } from "react-router-dom";
 import { cn } from "utils/cn";
 
 interface SidebarProps {
@@ -61,18 +61,8 @@ export const SettingsSidebarNavItem: FC<SettingsSidebarNavItemProps> = ({
 	href,
 	end,
 }) => {
+	const matchResult = useMatch(href);
 
-	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}
@@ -81,7 +71,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 || isInitiallyActive,
+						"font-semibold text-content-primary": matchResult !== null,
 					},
 				)
 			}

From 2c262fd09dba11b0ea47477304f276967aef9254 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 8 Jan 2025 21:24:05 +0000
Subject: [PATCH 3/4] chore: cleanup

---
 site/src/components/Sidebar/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx
index 3752c16b5cd1c..0dee64d9bee0f 100644
--- a/site/src/components/Sidebar/Sidebar.tsx
+++ b/site/src/components/Sidebar/Sidebar.tsx
@@ -67,7 +67,7 @@ export const SettingsSidebarNavItem: FC<SettingsSidebarNavItemProps> = ({
 		<NavLink
 			end={end}
 			to={href}
-			className={({ 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",
 					{

From bde2ccbcf537cb1aa4276657dc24756f51ee5cf1 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Thu, 9 Jan 2025 22:39:32 +0000
Subject: [PATCH 4/4] chore: PR review updates

---
 site/src/components/Sidebar/Sidebar.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx
index 0dee64d9bee0f..7799ba0384eeb 100644
--- a/site/src/components/Sidebar/Sidebar.tsx
+++ b/site/src/components/Sidebar/Sidebar.tsx
@@ -61,20 +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={() =>
-				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,
-					},
-				)
-			}
+			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>

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16073.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16073.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16073.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16073.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>