feat: Use group key on sidenav instead of subnav to populate group he…

…ader
newrelic · Jun 17, 2020 · 22a9254 · 22a9254
1 parent d33e287
commit 22a9254
Show file tree

Hide file tree

Showing 3 changed files with 452 additions and 417 deletions.
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { Fragment, useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import cx from 'classnames';
@@ -11,53 +11,69 @@ import styles from './Sidebar.module.scss';
 
 // recursively create navigation
 const renderNav = (pages, depthLevel = 0) => {
-  return pages.map((page, index) => {
-    const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
-    const [isExpanded, setIsExpanded] = useState(
-      crumbs.length === depthLevel || crumbs.includes(page.displayName)
-    );
-    const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
+  const crumbs = useContext(BreadcrumbContext).map((x) => x.displayName);
 
-    return (
-      <li
-        className={cx(styles[`navDepth${depthLevel}`], {
-          [styles.isCurrentPage]: isCurrentPage,
-        })}
-        key={index}
-      >
-        {page.url ? (
-          <Link className={styles.navItem} to={page.url}>
-            {page.displayName}
-            {isCurrentPage && (
-              <FeatherIcon
-                className={styles.currentPageIndicator}
-                name="chevron-right"
-              />
-            )}
-          </Link>
-        ) : (
-          <div
-            className={styles.navItem}
-            role="button"
-            onClick={() => setIsExpanded((isExpanded) => !isExpanded)}
-            onKeyPress={() => setIsExpanded((isExpanded) => !isExpanded)}
-            tabIndex={0}
-          >
-            {page.displayName}
-          </div>
-        )}
-        {page.children && (
-          <ul
-            className={cx(styles.nestedNav, {
-              [styles.isExpanded]: isExpanded,
-            })}
+  const groupedPages = pages.reduce((groups, page) => {
+    const { group = '' } = page;
+
+    return {
+      ...groups,
+      [group]: [...(groups[group] || []), page],
+    };
+  }, {});
+
+  return Object.entries(groupedPages).map(([group, pages]) => (
+    <Fragment key={group}>
+      {group && (
+        <li className={cx(styles.navLink, styles.groupName)}>{group}</li>
+      )}
+      {pages.map((page) => {
+        const [isExpanded, setIsExpanded] = useState(
+          crumbs.includes(page.displayName)
+        );
+        const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
+
+        return (
+          <li
+            key={page.displayName}
+            data-depth={depthLevel}
+            className={cx({ [styles.isCurrentPage]: isCurrentPage })}
           >
-            {renderNav(page.children, depthLevel + 1)}
-          </ul>
-        )}
-      </li>
-    );
-  });
+            {page.url ? (
+              <Link className={styles.navLink} to={page.url}>
+                {page.displayName}
+                {isCurrentPage && (
+                  <FeatherIcon
+                    className={styles.currentPageIndicator}
+                    name="chevron-right"
+                  />
+                )}
+              </Link>
+            ) : (
+              <div
+                role="button"
+                className={styles.navLink}
+                onClick={() => setIsExpanded((isExpanded) => !isExpanded)}
+                onKeyPress={() => setIsExpanded((isExpanded) => !isExpanded)}
+                tabIndex={0}
+              >
+                {page.displayName}
+              </div>
+            )}
+            {page.children && (
+              <ul
+                className={cx(styles.nestedNav, {
+                  [styles.isExpanded]: isExpanded,
+                })}
+              >
+                {renderNav(page.children, depthLevel + 1)}
+              </ul>
+            )}
+          </li>
+        );
+      })}
+    </Fragment>
+  ));
 };
 
 const Sidebar = ({ className, pages, isOpen }) => (

diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
@@ -54,39 +54,32 @@
   padding-left: 0;
 }
 
-.navItem {
-  color: var(--color-black);
+.navLink {
+  color: var(--color-neutrals-900);
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-decoration: none;
+
+  [data-depth='0'] > & {
+    font-weight: bold;
+  }
 }
 
 .currentPageIndicator {
   stroke-width: 4;
 }
 
-.navDepth0 {
-  color: var(--color-black);
-  font-weight: bold;
-}
-
-.navDepth1 {
-  font-weight: normal;
-}
-
-.navDepth2 {
+.groupName {
+  color: var(--color-neutrals-600);
   font-weight: bold;
+  font-size: 0.75rem;
   text-transform: uppercase;
-  color: var(--color-neutrals-600);
-  font-size: 14px;
-}
 
-.navDepth3 {
-  font-weight: normal;
-  text-transform: initial;
-  color: var(--color-black);
+  &:not(:first-child) {
+    margin-top: 2rem;
+  }
 }
 
 .isCurrentPage {