fix: Reapply sidebar changes to <Navigation />

src/components/Navigation.js

@@ -1,52 +1,78 @@
-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';
 import { BreadcrumbContext } from './BreadcrumbContext';
+import FeatherIcon from './FeatherIcon';
 import pages from '../data/sidenav.json';
 
 import styles from './Navigation.module.scss';
 
 // recursively create navigation
 const renderNav = (pages, depthLevel = 0) => {
-  return pages.map((page, index) => {
-    const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
-    const [isDisplay, setIsDisplay] = useState(
-      crumbs.length === depthLevel || crumbs.includes(page.displayName)
-    );
-    const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
+  const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.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;
+  const groupedPages = pages.reduce((groups, page) => {
+    const { group = '' } = page;
 
-    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>
-      </li>
-    );
-  });
+    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.length === depthLevel || 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 })}
+          >
+            {page.url ? (
+              <Link className={styles.navLink} to={page.url}>
+                {page.displayName}
+                {isCurrentPage && (
+                  <FeatherIcon
+                    className={styles.currentPageIndicator}
+                    name="chevron-right"
+                  />
+                )}
+              </Link>
+            ) : (
+              <button
+                type="button"
+                className={styles.navLink}
+                onClick={() => setIsExpanded(!isExpanded)}
+                onKeyPress={() => setIsExpanded(!isExpanded)}
+                tabIndex={0}
+              >
+                {page.displayName}
+              </button>
+            )}
+            {page.children && (
+              <ul
+                className={cx(styles.nestedNav, {
+                  [styles.isExpanded]: isExpanded,
+                })}
+              >
+                {renderNav(page.children, depthLevel + 1)}
+              </ul>
+            )}
+          </li>
+        );
+      })}
+    </Fragment>
+  ));
 };
 
 const Navigation = ({ className }) => {

src/components/Navigation.module.scss

@@ -1,73 +1,64 @@
 .container {
   font-size: 0.875rem;
+}
 
-  ul {
-    margin: 0;
-    padding-left: 1rem;
-    list-style: none;
-  }
-
-  a {
-    color: var(--color-black);
-  }
-
-  // remove?
-  button {
-    background: none;
-    border: 0;
-    cursor: pointer;
-    width: 3rem;
-    display: none;
-  }
-
-  nav {
-    margin-top: 1rem;
-  }
+.listNav,
+.nestedNav {
+  list-style: none;
 }
 
 .nestedNav {
+  padding-left: 1rem;
   display: none;
-}
 
-.isDisplay {
-  display: block;
+  &.isExpanded {
+    display: block;
+  }
 }
 
 .listNav {
-  ul {
-    padding-left: 1rem;
-  }
+  padding-left: 0;
 }
 
-.navDepth0 {
-  color: var(--color-black);
-  font-weight: bold;
-  div {
-    margin: 1rem 0;
-  }
-  li {
-    margin: 1rem 0;
+.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;
   }
 }
 
-.navDepth1 {
-  font-weight: normal;
-  ul {
-    padding-left: 0.2rem;
+button.navLink {
+  color: var(--color-neutrals-900);
+  background: inherit;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+  font-weight: inherit;
+
+  &:focus {
+    outline: none;
   }
 }
 
-.navDepth2 {
+.currentPageIndicator {
+  stroke-width: 4;
+}
+
+.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 {

src/components/Sidebar.js

@@ -11,7 +11,7 @@ const Sidebar = ({ className }) => (
     <Link to="/">
       <Logo className={styles.logo} />
     </Link>
-    <Navigation />
+    <Navigation className={styles.nav} />
   </aside>
 );
 

src/components/Sidebar.module.scss

@@ -15,3 +15,7 @@
     width: 160px;
   }
 }
+
+.nav {
+  margin-top: 1rem;
+}