fix: better alignment of background with its parent

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

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
@@ -138,21 +138,14 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
           --depth: ${depthLevel};
           --depth-space: ${depthLevel}em;
 
-          margin: 0 -0.5rem;
-          padding: 0 0.5rem;
-          border-radius: 0.25rem;
+          padding-left: ${depthLevel === 0 ? '0' : 'calc(0.5rem + 1em)'};
 
           ${depthLevel === 0 &&
           css`
             &:not(:first-child) {
               margin-top: 1rem;
             }
           `}
-
-          ${isCurrentPage &&
-          css`
-            background: var(--color-dark-100);
-          `}
         `}
       >
         {page.url ? (
@@ -205,15 +198,16 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
             {display}
           </button>
         )}
+
+        {page.children && isExpanded && (
+          <NavigationItems
+            pages={page.children}
+            filteredPageNames={filteredPageNames}
+            depthLevel={depthLevel + 1}
+            searchTerm={searchTerm}
+          />
+        )}
       </div>
-      {page.children && isExpanded && (
-        <NavigationItems
-          pages={page.children}
-          filteredPageNames={filteredPageNames}
-          depthLevel={depthLevel + 1}
-          searchTerm={searchTerm}
-        />
-      )}
     </>
   );
 };

diff --git a/src/components/NavigationItems.module.scss b/src/components/NavigationItems.module.scss
@@ -5,14 +5,19 @@
   justify-content: space-between;
   text-decoration: none;
   transition: 0.2s ease-out;
-  padding: 0.5rem 0;
-  margin-left: calc((0.5rem * var(--depth)) + var(--depth-space));
+  padding: 0.5rem;
+  margin: 0 -0.5rem;
+  margin-left: calc((0.5rem + 1em) * -1);
+  border-radius: 0.25rem;
+  padding-left: calc(0.5rem + 1em);
 
   &:not(.isCurrentPage):hover {
     color: var(--primary-text-hover-color);
   }
 
   [data-depth='0'] > & {
+    padding-left: 0.5rem;
+    margin-left: -0.5rem;
     font-weight: 600;
   }
 }
@@ -68,7 +73,12 @@ button.navLink {
 }
 
 .isCurrentPage {
+  background: var(--color-neutrals-100);
   color: var(--primary-text-hover-color);
+
+  :global(.dark-mode) & {
+    background: var(--color-dark-100);
+  }
 }
 
 .isPartiallyCurrent {