refactor: different highlighting for sidebar title vs links

getsentry · Apr 23, 2024 · 3390dd1 · 3390dd1
1 parent cce22e9
commit 3390dd1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/components/dynamicNav.tsx b/src/components/dynamicNav.tsx
@@ -156,9 +156,10 @@ export function DynamicNav({
     parentNode && !noHeadingLink ? (
       <SmartLink
         to={`/${root}/`}
-        className={`${headerClassName} ${path.join('/') === root ? 'active' : ''}`}
+        className={headerClassName}
         activeClassName="active"
         data-sidebar-link
+        data-active-header={isActive}
       >
         <h6>{title}</h6>
       </SmartLink>

diff --git a/src/components/sidebar/style.module.scss b/src/components/sidebar/style.module.scss
@@ -94,6 +94,12 @@
       background-color: var(--accent-purple);
       border-radius: 4px;
     }
+
+    &[data-active-header='true'] {
+      color: var(--accent-purple);
+      background-color: var(--accent-purple-light);
+      opacity: 1;
+    }
   }
 }
 
@@ -110,7 +116,7 @@
     width: 100%;
   }
 
-  &.active {
+  &:global(.active) {
     background-color: var(--brandDecoration);
 
     h6 {