Improve sidenav link styles

netbox/project-static/styles/sidenav.scss

@@ -203,9 +203,9 @@
   @include parent-link() {
     width: unset;
     height: 100%;
+    padding-left: $sidenav-link-spacing-x / 2;
     font-weight: $font-weight-bold;
     color: var(--nbx-sidenav-parent-color);
-    padding-left: $sidenav-link-spacing-x / 2;
 
     &.active {
       color: $accordion-button-active-color;
@@ -260,20 +260,22 @@
 
       // All Links
       .nav-link {
+        position: relative;
         display: flex;
         align-items: center;
         width: 100%;
         padding: $sidenav-link-spacing-y $sidenav-link-spacing-x;
         font-size: $font-size-sm;
+        color: var(--nbx-sidenav-link-color);
         white-space: nowrap;
         transition: $transition-100ms-ease-in-out;
 
         &.active {
-          position: relative;
-          background-color: var(--nbx-sidebar-link-hover-bg);
+          background-color: var(--nbx-sidebar-link-active-bg);
         }
 
-        &:hover {
+        &:hover:not(.active) {
+          color: var(--nbx-body-color);
           background-color: var(--nbx-sidebar-link-hover-bg);
         }
 
@@ -290,7 +292,8 @@
       display: block;
       font-size: $font-size-xs;
       font-weight: $font-weight-bold;
-      color: $secondary;
+      // color: $secondary;
+      color: var(--nbx-sidenav-group-color);
       text-transform: uppercase;
       white-space: nowrap;
     }

netbox/project-static/styles/variables.scss

@@ -4,8 +4,8 @@
   // Light Mode Variables.
   --nbx-sidebar-bg: #{$gray-200};
   --nbx-sidebar-scroll: #{$gray-500};
-  --nbx-sidebar-link-color: #{$gray-800};
-  --nbx-sidebar-link-hover-bg: #{$blue-100};
+  --nbx-sidebar-link-hover-bg: #{rgba($gray-600, 0.15)};
+  --nbx-sidebar-link-active-bg: #{$blue-100};
   --nbx-sidebar-title-color: #{$text-muted};
   --nbx-sidebar-shadow: inset 0px -25px 20px -25px rgba(0, 0, 0, 0.25);
   --nbx-breadcrumb-bg: #{$light};
@@ -21,15 +21,17 @@
   --nbx-cable-termination-border-color: #{$gray-300};
   --nbx-search-filter-border-left-color: #{$gray-300};
   --nbx-color-mode-toggle-color: #{$primary};
+  --nbx-sidenav-link-color: #{$gray-800};
   --nbx-sidenav-pin-color: #{$orange};
   --nbx-sidenav-parent-color: #{$gray-900};
+  --nbx-sidenav-group-color: #{$secondary};
 
   &[data-netbox-color-mode='dark'] {
     // Dark Mode Variables.
     --nbx-sidebar-bg: #{$gray-900};
     --nbx-sidebar-scroll: #{$gray-700};
-    --nbx-sidebar-link-color: #{$gray-100};
-    --nbx-sidebar-link-hover-bg: #{rgba($blue-300, 0.15)};
+    --nbx-sidebar-link-active-bg: #{rgba($blue-300, 0.25)};
+    --nbx-sidebar-link-hover-bg: #{rgba($gray-500, 0.15)};
     --nbx-sidebar-title-color: #{$gray-600};
     --nbx-sidebar-shadow: inset 0px -25px 20px -25px rgba(255, 255, 255, 0.05);
     --nbx-breadcrumb-bg: #{$gray-800};
@@ -45,7 +47,9 @@
     --nbx-cable-termination-border-color: #{$gray-700};
     --nbx-search-filter-border-left-color: #{$gray-600};
     --nbx-color-mode-toggle-color: #{$yellow-300};
+    --nbx-sidenav-link-color: #{$gray-200};
     --nbx-sidenav-pin-color: #{$yellow};
     --nbx-sidenav-parent-color: #{$gray-100};
+    --nbx-sidenav-group-color: #{$gray-600};
   }
 }