fix: Spacing on collapsed nav items

newrelic · Jun 16, 2020 · 63bf2d4 · 63bf2d4
1 parent 7d1775f
commit 63bf2d4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 27 deletions.
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -17,34 +17,35 @@ 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}`], {
           [styles.isCurrentPage]: isCurrentPage,
         })}
         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
@@ -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 {