From bc90de9d1008cc2979f5abdec0be94da8fb63058 Mon Sep 17 00:00:00 2001 From: Jaayden Halko 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 = ({ 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 ( = ({ 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 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 = ({ 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 ( = ({ 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 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 = ({ + 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 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 = ({ 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": 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}