fix: Spacing on tertiary links

newrelic · Jun 17, 2020 · d33e287 · d33e287
1 parent 0d1cdd5
commit d33e287
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 35 deletions.
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -13,7 +13,7 @@ import styles from './Sidebar.module.scss';
 const renderNav = (pages, depthLevel = 0) => {
   return pages.map((page, index) => {
     const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
-    const [isDisplay, setIsDisplay] = useState(
+    const [isExpanded, setIsExpanded] = useState(
       crumbs.length === depthLevel || crumbs.includes(page.displayName)
     );
     const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
@@ -39,16 +39,18 @@ const renderNav = (pages, depthLevel = 0) => {
           <div
             className={styles.navItem}
             role="button"
-            onClick={() => setIsDisplay(!isDisplay)}
-            onKeyPress={() => setIsDisplay(!isDisplay)}
+            onClick={() => setIsExpanded((isExpanded) => !isExpanded)}
+            onKeyPress={() => setIsExpanded((isExpanded) => !isExpanded)}
             tabIndex={0}
           >
             {page.displayName}
           </div>
         )}
         {page.children && (
           <ul
-            className={cx(styles.nestedNav, { [styles.isDisplay]: isDisplay })}
+            className={cx(styles.nestedNav, {
+              [styles.isExpanded]: isExpanded,
+            })}
           >
             {renderNav(page.children, depthLevel + 1)}
           </ul>
@@ -63,7 +65,7 @@ const Sidebar = ({ className, pages, isOpen }) => (
     <Link to="/">
       <Logo className={styles.logo} />
     </Link>
-    <nav role="navigation" aria-label="Sidebar">
+    <nav className={styles.nav} role="navigation" aria-label="Sidebar">
       <ul className={styles.listNav}>{renderNav(pages)}</ul>
     </nav>
   </aside>

diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
@@ -3,16 +3,6 @@
   border-right: 1px solid var(--color-neutrals-100);
   font-size: 0.875rem;
 
-  ul {
-    margin: 0;
-    padding-left: 1rem;
-    list-style: none;
-  }
-
-  h3 {
-    margin: 0;
-  }
-
   button {
     background: none;
     border: 0;
@@ -25,14 +15,6 @@
     }
   }
 
-  nav {
-    margin-top: 1rem;
-
-    @media (max-width: 760px) {
-      display: none;
-    }
-  }
-
   &.isOpen {
     nav {
       @media (max-width: 760px) {
@@ -42,27 +24,34 @@
   }
 }
 
-.top {
-  display: flex;
-  justify-content: space-between;
+.nav {
+  margin-top: 1rem;
+
+  @media (max-width: 760px) {
+    display: none;
+  }
 }
 
 .logo {
   width: 200px;
 }
 
+.listNav,
 .nestedNav {
-  display: none;
+  list-style: none;
 }
 
-.isDisplay {
-  display: block;
+.nestedNav {
+  display: none;
+  padding-left: 1rem;
+
+  &.isExpanded {
+    display: block;
+  }
 }
 
 .listNav {
-  ul {
-    padding-left: 1rem;
-  }
+  padding-left: 0;
 }
 
 .navItem {
@@ -85,9 +74,6 @@
 
 .navDepth1 {
   font-weight: normal;
-  ul {
-    padding-left: 0.2rem;
-  }
 }
 
 .navDepth2 {