refactor: only apply breadcrumb/current page styles depending on how …

…the link is matched
newrelic · Aug 7, 2020 · 9e0147b · 9e0147b
1 parent 9af0f49
commit 9e0147b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
@@ -149,18 +149,26 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
       >
         {page.url ? (
           <Link
-            activeStyle={{ fontWeight: 'bold' }}
             partiallyActive
             onClick={
               isToggleable ? () => setToggleIsExpanded(!toggleIsExpanded) : null
             }
-            className={cx(
-              {
-                [styles.isCurrentPage]: isCurrentPage,
-                [styles.isBreadCrumb]: isBreadCrumb,
-              },
-              styles.navLink
-            )}
+            css={css`
+              color: var(--primary-text-color);
+            `}
+            getProps={({ isCurrent, isPartiallyCurrent }) => {
+              if (isCurrent) {
+                return { className: cx(styles.navLink, styles.isCurrentPage) };
+              }
+
+              if (isPartiallyCurrent) {
+                return {
+                  className: cx(styles.navLink, styles.isBreadCrumb),
+                };
+              }
+
+              return { className: styles.navLink };
+            }}
             to={page.url}
           >
             <span className={styles.navLinkText}>

diff --git a/src/components/NavigationItems.module.scss b/src/components/NavigationItems.module.scss
@@ -67,15 +67,15 @@ button.navLink {
   }
 }
 
+.isCurrentPage {
+  font-weight: bold;
+}
+
 .isBreadCrumb {
   font-weight: bold !important;
 }
 
 .filterOn {
-  ul {
-    display: block;
-  }
-
   .groupName {
     margin-top: 0.5rem;
   }