DOP-4956: Hovering over sidenav results in light mode while loading (#…

…1212)
mongodb · Aug 29, 2024 · 2f6bb03 · 2f6bb03
1 parent 5cde021
commit 2f6bb03
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/src/components/Sidenav/Sidenav.js b/src/components/Sidenav/Sidenav.js
@@ -117,6 +117,9 @@ const SidenavContainer = styled.div(
 
     a[class*='lg-ui-side-nav-item'] {
       color: var(--sidenav-item-color);
+      :not([aria-current='page']):hover {
+        background-color: var(--sidenav-hover-bg-color);
+      }
     }
 
     [data-testid='side-nav-collapse-toggle'] {

diff --git a/src/styles/global-dark-mode.css b/src/styles/global-dark-mode.css
@@ -28,6 +28,7 @@ body {
 
   --sidenav-item-title: var(--gray-dark3);
   --sidenav-item-color: var(--black);
+  --sidenav-hover-bg-color: var(--gray-light2);
   --sidenav-active-bg-color: var(--green-light3);
   --sidenav-active-color: var(--green-dark2);
   --sidenav-active-before-color: var(--green-dark1);
@@ -64,6 +65,7 @@ body {
 
   --sidenav-item-title: var(--gray-light2);
   --sidenav-item-color: var(--gray-light2);
+  --sidenav-hover-bg-color: var(--gray-dark3);
   --sidenav-active-bg-color: var(--green-dark3);
   --sidenav-active-color: var(--white);
   --sidenav-active-before-color: var(--green-base);