fix: styling on active route vs non active in list item

SpecterOps · Jan 29, 2025 · 6d83eac · 6d83eac
1 parent 0f7630a
commit 6d83eac
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/packages/javascript/bh-shared-ui/src/components/Navigation/MainNav.tsx b/packages/javascript/bh-shared-ui/src/components/Navigation/MainNav.tsx
@@ -39,7 +39,7 @@ const MainNavListItem: FC<{ children: ReactNode; route?: string }> = ({ children
 
     return (
         <li
-            className={`h-10 px-2 mx-2 flex items-center ${isActiveRoute && 'text-primary bg-neutral-light-4'}  cursor-pointer rounded`}>
+            className={`h-10 px-2 mx-2 flex items-center ${isActiveRoute ? 'text-primary bg-neutral-light-4' : 'text-neutral-dark-0 dark:text-neutral-light-1'}  cursor-pointer rounded`}>
             {children}
         </li>
     );
@@ -56,7 +56,7 @@ const MainNavItemAction: FC<{ onClick: () => void; children: ReactNode; isMenuEx
         <div
             role='button'
             onClick={onClick}
-            className={`h-10 ${isMenuExpanded ? 'w-full' : 'w-auto'} absolute left-4 flex items-center gap-x-2 text-neutral-dark-0 dark:text-neutral-light-1 hover:text-secondary dark:hover:text-secondary-variant-2 hover:underline `}>
+            className={`h-10 ${isMenuExpanded ? 'w-full' : 'w-auto'} absolute left-4 flex items-center gap-x-2 hover:text-secondary dark:hover:text-secondary-variant-2 hover:underline `}>
             {children}
         </div>
     );
@@ -72,7 +72,7 @@ const MainNavItemLink: FC<{ route: string; children: ReactNode; isMenuExpanded:
         // Note: The w-full terniary is to avoid the hover area to overflow out of the nav when its collapsed
         <RouterLink
             to={route as string}
-            className={`h-10 ${isMenuExpanded ? 'w-full' : 'w-auto'} absolute left-4 flex items-center gap-x-2 text-neutral-dark-0 dark:text-neutral-light-1 hover:text-secondary dark:hover:text-secondary-variant-2 hover:underline`}
+            className={`h-10 ${isMenuExpanded ? 'w-full' : 'w-auto'} absolute left-4 flex items-center gap-x-2 hover:text-secondary dark:hover:text-secondary-variant-2 hover:underline`}
             {...rest}>
             {children}
         </RouterLink>
@@ -139,7 +139,7 @@ const MainNav: FC<{ mainNavData: MainNavData }> = ({ mainNavData }) => {
 
     return (
         <nav
-            className={`z-nav fixed top-0 left-0 h-full ${isMenuExpanded ? 'w-nav-width-expanded overflow-y-auto overflow-x-hidden' : 'w-nav-width'} duration-300 ease-in flex flex-col items-center pt-4 bg-neutral-light-2 shadow-sm print:hidden`}
+            className={`z-nav fixed top-0 left-0 h-full ${isMenuExpanded ? 'w-nav-width-expanded overflow-y-auto overflow-x-hidden' : 'w-nav-width'} duration-300 ease-in flex flex-col items-center pt-4 shadow-sm bg-neutral-light-2 dark:bg-neutral-dark-2 print:hidden`}
             onMouseEnter={() => setIsMenuExpanded(true)}
             onMouseLeave={() => setIsMenuExpanded(false)}>
             <MainNavItemLink