feat(sidebar): highlight selected route

src/app.tsx

@@ -61,7 +61,7 @@ export const App = () => {
               }
             />
             <Route
-              path="/accounts"
+              path="/settings/accounts"
               element={
                 <RequireAuth>
                   <AccountsRoute />

src/components/Sidebar.tsx

@@ -110,13 +110,15 @@ export const Sidebar: FC = () => {
               icon={FilterIcon}
               size={Size.MEDIUM}
               metric={filterCount}
+              route={'/filters'}
               onClick={() => toggleFilters()}
             />
 
             <SidebarButton
               title="Settings"
               icon={GearIcon}
               size={Size.MEDIUM}
+              route={'/settings'}
               onClick={() => toggleSettings()}
             />
           </>

src/components/buttons/SidebarButton.test.tsx

@@ -1,5 +1,6 @@
 import { MarkGithubIcon } from '@primer/octicons-react';
 import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import { Size } from '../../types';
 import { type ISidebarButton, SidebarButton } from './SidebarButton';
 
@@ -10,7 +11,11 @@ describe('components/buttons/SidebarButton.tsx', () => {
       metric: 1,
       icon: MarkGithubIcon,
     };
-    const tree = render(<SidebarButton {...props} />);
+    const tree = render(
+      <MemoryRouter>
+        <SidebarButton {...props} />
+      </MemoryRouter>,
+    );
     expect(tree).toMatchSnapshot();
   });
 
@@ -20,7 +25,11 @@ describe('components/buttons/SidebarButton.tsx', () => {
       metric: 0,
       icon: MarkGithubIcon,
     };
-    const tree = render(<SidebarButton {...props} />);
+    const tree = render(
+      <MemoryRouter>
+        <SidebarButton {...props} />
+      </MemoryRouter>,
+    );
     expect(tree).toMatchSnapshot();
   });
 
@@ -31,7 +40,11 @@ describe('components/buttons/SidebarButton.tsx', () => {
       icon: MarkGithubIcon,
       size: Size.MEDIUM,
     };
-    const tree = render(<SidebarButton {...props} />);
+    const tree = render(
+      <MemoryRouter>
+        <SidebarButton {...props} />
+      </MemoryRouter>,
+    );
     expect(tree).toMatchSnapshot();
   });
 });

src/components/buttons/SidebarButton.tsx

@@ -1,29 +1,36 @@
 import type { Icon } from '@primer/octicons-react';
 import type { FC } from 'react';
+import { useLocation } from 'react-router-dom';
 import { IconColor, Size } from '../../types';
 import { cn } from '../../utils/cn';
 
 export interface ISidebarButton {
   title: string;
   metric?: number;
   icon: Icon;
+  route?: string;
   onClick?: () => void;
   size?: Size;
   loading?: boolean;
   disabled?: boolean;
 }
 
 export const SidebarButton: FC<ISidebarButton> = (props: ISidebarButton) => {
+  const location = useLocation();
+
   const hasMetric = props?.metric > 0;
 
+  const isRoute = location.pathname.startsWith(props.route);
+
   return (
     <button
       type="button"
       className={cn(
-        'flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default',
+        'flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500  disabled:cursor-default',
         hasMetric
-          ? `${IconColor.GREEN} hover:text-green-700`
-          : `${IconColor.WHITE} hover:text-gray-500`,
+          ? `${IconColor.GREEN} hover:text-green-700 shadow-green-500`
+          : `${IconColor.WHITE} hover:text-gray-500 shadow-white`,
+        isRoute && 'shadow',
         props.loading ? 'animate-spin' : undefined,
         props.size ? 'py-2' : 'py-1',
       )}

src/components/settings/SettingsFooter.test.tsx

@@ -123,7 +123,7 @@ describe('routes/components/settings/SettingsFooter.tsx', () => {
     });
 
     fireEvent.click(screen.getByTitle('Accounts'));
-    expect(mockNavigate).toHaveBeenCalledWith('/accounts');
+    expect(mockNavigate).toHaveBeenCalledWith('/settings/accounts');
   });
 
   it('should quit the app', async () => {

src/components/settings/SettingsFooter.tsx

@@ -37,7 +37,7 @@ export const SettingsFooter: FC = () => {
           className={BUTTON_CLASS_NAME}
           title="Accounts"
           onClick={() => {
-            navigate('/accounts');
+            navigate('/settings/accounts');
           }}
         >
           <PersonIcon size={Size.LARGE} aria-label="Accounts" />

src/types.ts

@@ -140,6 +140,7 @@ export interface FormattedReason {
 export enum IconColor {
   GRAY = 'text-gray-500 dark:text-gray-300',
   GREEN = 'text-green-500',
+  ORANGE = 'text-orange-500',
   PURPLE = 'text-purple-500',
   RED = 'text-red-500',
   YELLOW = 'text-yellow-500 dark:text-yellow-300',