Polish side navigation styling

src/components/BreadcrumbContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const BreadcrumbContext = React.createContext([]);

src/components/Sidebar.js

@@ -1,48 +1,65 @@
-import React from 'react';
+import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import cx from 'classnames';
+import { BreadcrumbContext } from './BreadcrumbContext';
 
 import { link } from '../types';
 import styles from './Sidebar.module.scss';
 
 // recursively create navigation
-const renderNav = (page, index) => (
-  <li key={index}>
-    {page.url ? (
-      <Link to={page.url} className={cx({ [styles.isActive]: page.active })}>
-        {page.displayName}
-      </Link>
+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 display = page.url ? (
+      <Link to={page.url}>{page.displayName}</Link>
     ) : (
-      <div>{page.displayName}</div>
-    )}
-    {page.children && <ul>{page.children.map(renderNav)}</ul>}
-  </li>
-);
+      <div
+        role="button"
+        onClick={() => setIsDisplay(!isDisplay)}
+        onKeyPress={() => setIsDisplay(!isDisplay)}
+        tabIndex={0}
+      >
+        {page.displayName}
+      </div>
+    );
+    let subNav;
 
-const Sidebar = ({ className, pages, isOpen, toggle }) => (
+    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>
+    );
+  });
+};
+
+const Sidebar = ({ className, pages, isOpen }) => (
   <aside className={cx(styles.sidebar, className, { [styles.isOpen]: isOpen })}>
     <Link to="/" className={styles.logo} />
-    <div className={styles.top}>
-      <h3>Pages</h3>
-      <button
-        aria-expanded={isOpen}
-        aria-label="Main Menu Toggle"
-        type="button"
-        onClick={() => toggle()}
-      >
-        {isOpen ? 'close' : 'open'}
-      </button>
-    </div>
     <nav role="navigation" aria-label="Sidebar">
-      <ul>{pages.map(renderNav)}</ul>
+      <ul className={styles.listNav}>{renderNav(pages)}</ul>
     </nav>
   </aside>
 );
 
 Sidebar.propTypes = {
   className: PropTypes.string,
-  toggle: PropTypes.func.isRequired,
   pages: PropTypes.arrayOf(link).isRequired,
   isOpen: PropTypes.bool,
 };

src/components/Sidebar.module.scss

@@ -1,4 +1,6 @@
 .sidebar {
+  font-size: 0.875rem;
+
   ul {
     margin: 0;
     padding-left: 1rem;
@@ -9,15 +11,6 @@
     text-decoration: none;
     color: var(--color-black);
     display: inline-block;
-    padding: 0.2rem 0;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    &.isActive {
-      font-weight: bold;
-    }
   }
 
   h3 {
@@ -67,3 +60,52 @@
   margin-right: 1rem;
   background-image: url('../images/developers-logo.svg');
 }
+
+.nestedNav {
+  display: none;
+}
+
+.isDisplay {
+  display: block;
+}
+
+.listNav {
+  ul {
+    padding-left: 1rem;
+  }
+}
+
+.navDepth0 {
+  color: var(--color-black);
+  font-weight: bold;
+  div {
+    margin: 1rem 0;
+  }
+  li {
+    margin: 1rem 0;
+  }
+}
+
+.navDepth1 {
+  font-weight: normal;
+  ul {
+    padding-left: 0.2rem;
+  }
+}
+
+.navDepth2 {
+  font-weight: bold;
+  text-transform: uppercase;
+  color: var(--color-neutrals-600);
+  font-size: 14px;
+}
+
+.navDepth3 {
+  font-weight: normal;
+  text-transform: initial;
+  color: var(--color-black);
+}
+
+.isCurrentPage {
+  font-weight: bold;
+}