From 34c5fd45f03b10bed8621a05aa80f7eda547f32a Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Fri, 7 Aug 2020 02:25:57 -0700
Subject: [PATCH] fix: better alignment of background with its parent

---
 src/components/NavigationItems.js          | 26 +++++++++-------------
 src/components/NavigationItems.module.scss | 14 ++++++++++--
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
index 5094709d6..8f12e99f6 100644
--- a/src/components/NavigationItems.js
+++ b/src/components/NavigationItems.js
@@ -138,9 +138,7 @@ 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`
@@ -148,11 +146,6 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
               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
index ca8c819e5..6aaeb50e4 100644
--- 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 {