styling for job status nav when active and hover (#1303)

DesignSafe-CI · Jun 18, 2024 · 19a2788 · 19a2788
1 parent 9931a42
commit 19a2788
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 10 deletions.
diff --git a/client/modules/workspace/src/JobStatusNav/JobStatusNav.module.css b/client/modules/workspace/src/JobStatusNav/JobStatusNav.module.css
@@ -6,3 +6,16 @@
 .badge {
   margin: 0 10px;
 }
+
+.root:hover,
+.root:focus,
+.highlighted-row,
+.highlighted-row:hover,
+.highlighted-row:focus {
+  background-color: #cbdded;
+  text-decoration: none;
+}
+
+.highlighted-row:hover {
+  cursor: unset;
+}
diff --git a/client/modules/workspace/src/JobStatusNav/JobStatusNav.tsx b/client/modules/workspace/src/JobStatusNav/JobStatusNav.tsx
@@ -23,14 +23,21 @@ export const JobStatusNav: React.FC = () => {
     borderRight: '1px solid var(--global-color-primary--normal)',
   };
   return (
-    <Header style={headerStyle}>
-      <Badge count={unreadNotifs} size="small" className={styles.badge}>
-        <Icon
-          className={`ds-icon-Job-Status ${styles.icon}`}
-          label="Job-Status"
-        />
-      </Badge>
-      <NavLink to={`history`}>Job Status</NavLink>
-    </Header>
+    <NavLink
+      to={`history`}
+      className={({ isActive }) =>
+        isActive ? styles['highlighted-row'] : styles.root
+      }
+    >
+      <Header style={headerStyle}>
+        <Badge count={unreadNotifs} size="small" className={styles.badge}>
+          <Icon
+            className={`ds-icon-Job-Status ${styles.icon}`}
+            label="Job-Status"
+          />
+        </Badge>
+        Job Status
+      </Header>
+    </NavLink>
   );
 };
diff --git a/client/src/styles.css b/client/src/styles.css
@@ -132,7 +132,7 @@
 }
 
 /* DO scroll app category menu */
-.ant-layout-sider-children > header + div + ul {
+.ant-layout-sider-children > a + div + ul {
   overflow: auto;
   height: 100%;
 }