修复

src/account/workspace.css

@@ -34,12 +34,7 @@
     height: 3px;
     margin-top: 0.48rem;
     border-radius: 99px;
-    background: linear-gradient(
+    background: var(--console-primary);
-        90deg,
-        var(--console-teal) 0 34%,
-        var(--console-amber) 34% 67%,
-        var(--console-coral) 67%
-    );
 }
 
 .nexus-nav-label {
@@ -83,12 +78,7 @@
     left: clamp(1.25rem, 3.2vw, 3.75rem);
     width: 3px;
     border-radius: 99px;
-    background: linear-gradient(
+    background: var(--console-primary);
-        180deg,
-        var(--console-teal) 0 34%,
-        var(--console-amber) 34% 67%,
-        var(--console-coral) 67%
-    );
     content: "";
 }
 
@@ -267,12 +257,7 @@
     position: absolute;
     inset: 0 0 auto;
     height: 4px;
-    background: linear-gradient(
+    background: var(--console-primary);
-        90deg,
-        var(--console-teal) 0 34%,
-        var(--console-amber) 34% 67%,
-        var(--console-coral) 67%
-    );
     content: "";
 }
 

src/admin/PageNav.tsx

@@ -10,13 +10,14 @@ import { useEnvironment } from "../shared/keycloak-ui-shared";
 import {
     Label,
     Nav,
+    NavExpandable,
     NavGroup,
     PageSidebar,
     PageSidebarBody
 } from "../shared/@patternfly/react-core";
 import { FormEvent } from "react";
 import { useTranslation } from "react-i18next";
-import { NavLink, useNavigate } from "react-router-dom";
+import { NavLink, useLocation, useNavigate } from "react-router-dom";
 import { useAccess } from "./context/access/Access";
 import { useRealm } from "./context/realm-context/RealmContext";
 import { useServerInfo } from "./context/server-info/ServerInfoProvider";
@@ -61,6 +62,7 @@ const LeftNav = ({ title, path, code, id }: LeftNavProps) => {
                 id={name}
                 data-testid={name}
                 to={`/${encodedRealm}${path}`}
+                end={path === ""}
                 className={({ isActive }) =>
                     `pf-v5-c-nav__link${isActive ? " pf-m-current" : ""}`
                 }
@@ -82,6 +84,7 @@ export const PageNav = () => {
     const isFeatureEnabled = useIsFeatureEnabled();
     const pages = componentTypes?.["org.keycloak.services.ui.extend.UiPageProvider"];
     const navigate = useNavigate();
+    const { pathname } = useLocation();
     const { realm, realmRepresentation } = useRealm();
 
     type SelectedItem = {
@@ -113,6 +116,27 @@ export const PageNav = () => {
         hasSomeAccess("realm-admin", "admin") && isFeatureEnabled(Feature.Workflows);
     const showManageRealm = environment.masterRealm === environment.realm;
     const realmName = resolveDisplayName(t, realmRepresentation.displayName, realm);
+    const managePaths = [
+        "/organizations",
+        "/clients",
+        "/client-scopes",
+        "/roles",
+        "/users",
+        "/groups",
+        "/sessions",
+        "/events"
+    ];
+    const configurePaths = [
+        "/realm-settings",
+        "/authentication",
+        "/permissions",
+        "/identity-providers",
+        "/user-federation",
+        "/workflows",
+        "/page-section"
+    ];
+    const isManageActive = managePaths.some(path => pathname.includes(path));
+    const isConfigureActive = configurePaths.some(path => pathname.includes(path));
 
     return (
         <PageSidebar className="keycloak__page_nav__nav">
@@ -151,7 +175,13 @@ export const PageNav = () => {
                         </NavGroup>
                     )}
                     {showManage && (
-                        <NavGroup aria-label={t("manage")} title={t("manage")}>
+                        <NavExpandable
+                            className="admin-nav-group"
+                            groupId="manage"
+                            title={t("manage")}
+                            isActive={isManageActive}
+                            isExpanded={isManageActive}
+                        >
                             {isFeatureEnabled(Feature.Organizations) &&
                                 realmRepresentation.organizationsEnabled && (
                                     <LeftNav
@@ -171,10 +201,16 @@ export const PageNav = () => {
                             <LeftNav title="groups" path="/groups" code="GRP" />
                             <LeftNav title="sessions" path="/sessions" code="SES" />
                             <LeftNav title="events" path="/events" code="EVT" />
-                        </NavGroup>
+                        </NavExpandable>
                     )}
                     {showConfigure && (
-                        <NavGroup aria-label={t("configure")} title={t("configure")}>
+                        <NavExpandable
+                            className="admin-nav-group"
+                            groupId="configure"
+                            title={t("configure")}
+                            isActive={isConfigureActive}
+                            isExpanded={isConfigureActive}
+                        >
                             <LeftNav
                                 title="realmSettings"
                                 path="/realm-settings"
@@ -220,7 +256,7 @@ export const PageNav = () => {
                                         code="EXT"
                                     />
                                 ))}
-                        </NavGroup>
+                        </NavExpandable>
                     )}
                 </Nav>
                 <div className="admin-nav-footer">