Upgrade to Gatsby v2

src/components/Sidebar/Menu/Menu.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import styles from './Menu.module.scss';
+
+const Menu = ({ menu }) => (
+  <nav className={styles['menu']}>
+    <ul className={styles['menu__list']}>
+      {menu.map((item) => (
+        <li className={styles['menu__list-item']} key={item.path}>
+          <Link
+            to={item.path}
+            className={styles['menu__list-item-link']}
+            activeClassName={styles['menu__list-item-link--active']}
+          >
+            {item.label}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  </nav>
+);
+
+export default Menu;

src/components/Sidebar/Menu/Menu.module.scss

@@ -0,0 +1,39 @@
+@import '../../../assets/scss/variables';
+@import '../../../assets/scss/mixins';
+
+.menu {
+  @include margin-bottom(1);
+
+  &__list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    &-item {
+      padding: 0;
+      margin: 10px 0;
+
+      &-link {
+        font-size: $typographic-base-font-size;
+        color: $typographic-base-font-color;
+        font-weight: normal;
+        border: 0;
+
+        &:hover,
+        &:focus {
+          color: $color-primary;
+          border-bottom: 1px solid $color-primary;
+        }
+
+        &--active {
+          color: $color-base;
+          border-bottom: 1px solid $color-base;
+        }
+
+      }
+
+    }
+
+  }
+
+}

src/components/Sidebar/Menu/Menu.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Menu from './Menu';
+
+describe('Menu', () => {
+  const props = {
+    menu: [
+      {
+        label: 'Item 0',
+        path: '/#0/'
+      },
+      {
+        label: 'Item 1',
+        path: '/#1/'
+      }
+    ]
+  };
+
+  it('renders correctly', () => {
+    const tree = renderer.create(<Menu {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Sidebar/Menu/__snapshots__/Menu.test.js.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Menu renders correctly 1`] = `
+<nav
+  className="menu"
+>
+  <ul
+    className="menu__list"
+  >
+    <li
+      className="menu__list-item"
+    >
+      <Link
+        activeClassName="menu__list-item-link--active"
+        className="menu__list-item-link"
+        to="/#0/"
+      >
+        Item 0
+      </Link>
+    </li>
+    <li
+      className="menu__list-item"
+    >
+      <Link
+        activeClassName="menu__list-item-link--active"
+        className="menu__list-item-link"
+        to="/#1/"
+      >
+        Item 1
+      </Link>
+    </li>
+  </ul>
+</nav>
+`;

src/components/Sidebar/Menu/index.js

@@ -0,0 +1 @@
+export { default } from './Menu';