From b3cfa75df32eb2fc923eb6609b0b04d66d52a715 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Wed, 11 Jun 2025 16:45:33 -0400
Subject: [PATCH] fix(ws): update logic to expose active nav item in default
 view

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>
---
 workspaces/frontend/src/app/AppRoutes.tsx     |  4 ++--
 workspaces/frontend/src/app/NavSidebar.tsx    | 23 ++++++++++++-------
 .../frontend/src/shared/style/MUI-theme.scss  |  6 ++---
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/workspaces/frontend/src/app/AppRoutes.tsx b/workspaces/frontend/src/app/AppRoutes.tsx
index 757ef1098..ec6d60e44 100644
--- a/workspaces/frontend/src/app/AppRoutes.tsx
+++ b/workspaces/frontend/src/app/AppRoutes.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes, Navigate } from 'react-router-dom';
 import { AppRoutePaths } from '~/app/routes';
 import { WorkspaceForm } from '~/app/pages/Workspaces/Form/WorkspaceForm';
 import { NotFound } from './pages/notFound/NotFound';
@@ -64,7 +64,7 @@ const AppRoutes: React.FC = () => {
       <Route path={AppRoutePaths.workspaceEdit} element={<WorkspaceForm />} />
       <Route path={AppRoutePaths.workspaces} element={<Workspaces />} />
       <Route path={AppRoutePaths.workspaceKinds} element={<WorkspaceKinds />} />
-      <Route path="/" element={<Workspaces />} />
+      <Route path="/" element={<Navigate to={AppRoutePaths.workspaces} replace />} />
       <Route path="*" element={<NotFound />} />
       {
         // TODO: Remove the linter skip when we implement authentication
diff --git a/workspaces/frontend/src/app/NavSidebar.tsx b/workspaces/frontend/src/app/NavSidebar.tsx
index 49a169ad8..50ed31d9c 100644
--- a/workspaces/frontend/src/app/NavSidebar.tsx
+++ b/workspaces/frontend/src/app/NavSidebar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import {
   Brand,
   Nav,
@@ -12,13 +12,20 @@ import {
 import { useNavData, isNavDataGroup, NavDataHref, NavDataGroup } from './AppRoutes';
 import { isMUITheme, LOGO_LIGHT } from './const';
 
-const NavHref: React.FC<{ item: NavDataHref }> = ({ item }) => (
-  <NavItem key={item.label} data-id={item.label} itemId={item.label}>
-    <NavLink to={item.path} data-testid={`nav-link-${item.path}`}>
-      {item.label}
-    </NavLink>
-  </NavItem>
-);
+const NavHref: React.FC<{ item: NavDataHref }> = ({ item }) => {
+  const location = useLocation();
+
+  // With the redirect in place, we can now use a simple path comparison.
+  const isActive = location.pathname === item.path;
+
+  return (
+    <NavItem isActive={isActive} key={item.label} data-id={item.label} itemId={item.label}>
+      <NavLink to={item.path} data-testid={`nav-link-${item.path}`}>
+        {item.label}
+      </NavLink>
+    </NavItem>
+  );
+};
 
 const NavGroup: React.FC<{ item: NavDataGroup }> = ({ item }) => {
   const { children } = item;
diff --git a/workspaces/frontend/src/shared/style/MUI-theme.scss b/workspaces/frontend/src/shared/style/MUI-theme.scss
index de78bc9bc..6184369ca 100644
--- a/workspaces/frontend/src/shared/style/MUI-theme.scss
+++ b/workspaces/frontend/src/shared/style/MUI-theme.scss
@@ -543,10 +543,10 @@
   --pf-v6-c-nav__link--hover--Color: var(--kf-central-sidebar-default-color);
   --pf-v6-c-nav__link--FontSize: var(--pf-t--global--font--size--md);
 
-  &.active {
+  &.pf-m-current {
     border-left: 3px solid var(--mui-palette-common-white);
-    --pf-v6-c-nav__link--Color: var(--mui-palette-common-white);
-    --pf-v6-c-nav__link--hover--Color: var(--mui-palette-common-white);
+    --pf-v6-c-nav__link--m-current--BackgroundColor: #ffffff1b;
+    --pf-v6-c-nav__link--m-current--Color: var(--mui-palette-common-white);
   }
 
   &.pf-v6-c-brand {