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 {