add primary color highlight to sidebar nav

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;

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,
             )}