From 63bf2d480bbd3348070fd80414105a1f9072eb3b Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Tue, 16 Jun 2020 16:49:53 -0700
Subject: [PATCH] fix: Spacing on collapsed nav items

---
 src/components/Sidebar.js          | 43 +++++++++++++++---------------
 src/components/Sidebar.module.scss | 10 +++----
 2 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
index 79d2a5cad..7ff69314d 100644
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@@ -17,23 +17,6 @@ const renderNav = (pages, depthLevel = 0) => {
     );
     const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
 
-    const display = page.url ? (
-      <Link to={page.url}>{page.displayName}</Link>
-    ) : (
-      <div
-        role="button"
-        onClick={() => setIsDisplay(!isDisplay)}
-        onKeyPress={() => setIsDisplay(!isDisplay)}
-        tabIndex={0}
-      >
-        {page.displayName}
-      </div>
-    );
-    let subNav;
-
-    if (page.children) {
-      subNav = renderNav(page.children, depthLevel + 1);
-    }
     return (
       <li
         className={cx(styles[`navDepth${depthLevel}`], {
@@ -41,10 +24,28 @@ const renderNav = (pages, depthLevel = 0) => {
         })}
         key={index}
       >
-        {display}
-        <ul className={cx(styles.nestedNav, { [styles.isDisplay]: isDisplay })}>
-          {subNav}
-        </ul>
+        {page.url ? (
+          <Link className={styles.navItem} to={page.url}>
+            {page.displayName}
+          </Link>
+        ) : (
+          <div
+            className={styles.navItem}
+            role="button"
+            onClick={() => setIsDisplay(!isDisplay)}
+            onKeyPress={() => setIsDisplay(!isDisplay)}
+            tabIndex={0}
+          >
+            {page.displayName}
+          </div>
+        )}
+        {page.children && (
+          <ul
+            className={cx(styles.nestedNav, { [styles.isDisplay]: isDisplay })}
+          >
+            {renderNav(page.children, depthLevel + 1)}
+          </ul>
+        )}
       </li>
     );
   });
diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
index 479bbf9bb..52308e71f 100644
--- a/src/components/Sidebar.module.scss
+++ b/src/components/Sidebar.module.scss
@@ -71,15 +71,13 @@
   }
 }
 
+.navItem {
+  margin-bottom: 1rem;
+}
+
 .navDepth0 {
   color: var(--color-black);
   font-weight: bold;
-  div {
-    margin: 1rem 0;
-  }
-  li {
-    margin: 1rem 0;
-  }
 }
 
 .navDepth1 {