fix: add background for current page

newrelic · Aug 7, 2020 · c76c91a · c76c91a
1 parent c798f13
commit c76c91a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 35 deletions.
diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
@@ -135,16 +135,24 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
         data-depth={depthLevel}
         className={cx({ [styles.filterOn]: filteredPageNames })}
         css={css`
-          padding-left: ${depthLevel > 0
-            ? `calc((0.5rem * ${depthLevel}) + ${depthLevel}em)`
-            : '0'};
+          --depth: ${depthLevel};
+          --depth-space: ${depthLevel}em;
+
+          margin: 0 -0.5rem;
+          padding: 0 0.5rem;
+          border-radius: 0.25rem;
 
           ${depthLevel === 0 &&
           css`
             &:not(:first-child) {
-              margin-top: 2rem;
+              margin-top: 1rem;
             }
           `}
+
+          ${isCurrentPage &&
+          css`
+            background: var(--color-dark-100);
+          `}
         `}
       >
         {page.url ? (
@@ -153,22 +161,10 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
             onClick={
               isToggleable ? () => setToggleIsExpanded(!toggleIsExpanded) : null
             }
-            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.isPartiallyCurrent),
-                };
-              }
-
-              return { className: styles.navLink };
-            }}
+            className={cx(styles.navLink, {
+              [styles.isCurrentPage]: isCurrentPage,
+              [styles.isPartiallyCurrent]: isBreadCrumb && !isCurrentPage,
+            })}
             to={page.url}
           >
             <span className={styles.navLinkText}>
@@ -184,21 +180,14 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
               )}
               {display}
             </span>
-            {isCurrentPage && (
-              <FeatherIcon
-                className={styles.currentPageIndicator}
-                name="chevron-right"
-              />
-            )}
             {isExternal(page.url) && <FeatherIcon name="external-link" />}
           </Link>
         ) : (
           <button
             type="button"
-            className={cx(
-              { [styles.isPartiallyCurrent]: isBreadCrumb },
-              styles.navLink
-            )}
+            className={cx(styles.navLink, {
+              [styles.isPartiallyCurrent]: isBreadCrumb,
+            })}
             onClick={() => setToggleIsExpanded(!toggleIsExpanded)}
             onKeyPress={() => setToggleIsExpanded(!toggleIsExpanded)}
             tabIndex={0}

diff --git a/src/components/NavigationItems.module.scss b/src/components/NavigationItems.module.scss
@@ -1,11 +1,12 @@
 .navLink {
   color: var(--primary-text-color);
-  margin-bottom: 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-decoration: none;
-  transition: 0.1s;
+  transition: 0.2s ease-out;
+  padding: 0.5rem 0;
+  margin-left: calc((0.5rem * var(--depth)) + var(--depth-space));
 
   &:not(.isCurrentPage):hover {
     color: var(--primary-text-hover-color);
@@ -24,7 +25,6 @@ button.navLink {
   color: var(--primary-text-color);
   background: inherit;
   border: none;
-  padding: 0;
   font-size: inherit;
   font-weight: inherit;
 
@@ -68,11 +68,11 @@ button.navLink {
 }
 
 .isCurrentPage {
-  font-weight: bold;
+  color: var(--primary-text-hover-color);
 }
 
 .isPartiallyCurrent {
-  font-weight: bold;
+  font-weight: bold !important;
 }
 
 .filterOn {