From 9801337c611d66f085789e61d73902f015dd4def Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 22 Nov 2025 04:23:35 -0800
Subject: [PATCH] add primary color highlight to sidebar nav

---
 .../features/sidebar/components/sidebar-item.module.css    | 4 ++++
 src/renderer/features/sidebar/components/sidebar-item.tsx  | 7 ++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/renderer/features/sidebar/components/sidebar-item.module.css b/src/renderer/features/sidebar/components/sidebar-item.module.css
index d7d20cefd..3b64c6c67 100644
--- a/src/renderer/features/sidebar/components/sidebar-item.module.css
+++ b/src/renderer/features/sidebar/components/sidebar-item.module.css
@@ -41,6 +41,10 @@
     }
 }
 
+.link.active {
+    color: var(--theme-colors-primary-filled);
+}
+
 .link.disabled {
     pointer-events: none;
     opacity: 0.6;
diff --git a/src/renderer/features/sidebar/components/sidebar-item.tsx b/src/renderer/features/sidebar/components/sidebar-item.tsx
index 3d236ba58..02728fd8c 100644
--- a/src/renderer/features/sidebar/components/sidebar-item.tsx
+++ b/src/renderer/features/sidebar/components/sidebar-item.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { memo } from 'react';
-import { Link, LinkProps } from 'react-router';
+import { Link, LinkProps, useLocation } from 'react-router';
 
 import styles from './sidebar-item.module.css';
 
@@ -11,6 +11,10 @@ interface SidebarItemProps extends ButtonProps {
 }
 
 export const SidebarItem = ({ children, className, to, ...props }: SidebarItemProps) => {
+    const location = useLocation();
+    const toPath = typeof to === 'string' ? to : to.pathname || '';
+    const isActive = location.pathname === toPath;
+
     return (
         <Button
             className={clsx(
@@ -18,6 +22,7 @@ export const SidebarItem = ({ children, className, to, ...props }: SidebarItemPr
                     [styles.disabled]: props.disabled,
                     [styles.link]: true,
                     [styles.root]: true,
+                    [styles.active]: isActive,
                 },
                 className,
             )}