refactor(starter): upgrade to new version of gatsby

src/components/Sidebar/Menu/Menu.js

@@ -1,31 +0,0 @@
-// @flow strict
-import React from 'react';
-import { Link } from 'gatsby';
-import styles from './Menu.module.scss';
-
-type Props = {
-  menu: {
-    label: string,
-    path: string
-  }[]
-};
-
-const Menu = ({ menu }: Props) => (
-  <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

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

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

@@ -1,24 +0,0 @@
-// @flow strict
-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/Menu.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { Menu } from "@/components/Sidebar/Menu";
+import * as mocks from "@/mocks";
+
+describe("Menu", () => {
+  const props = {
+    menu: mocks.menu,
+  };
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<Menu {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Sidebar/Menu/Menu.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import { Link } from "gatsby";
+
+import styles from "./Menu.module.scss";
+
+type Props = {
+  menu: {
+    label: string;
+    path: string;
+  }[];
+};
+
+const Menu: React.FC<Props> = ({ menu }: Props) => (
+  <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/__snapshots__/Menu.test.tsx.snap

@@ -12,9 +12,9 @@ exports[`Menu renders correctly 1`] = `
     >
       <a
         className="menu__list-item-link"
-        href="/#0/"
+        href="/"
       >
-        Item 0
+        Articles
       </a>
     </li>
     <li
@@ -22,9 +22,19 @@ exports[`Menu renders correctly 1`] = `
     >
       <a
         className="menu__list-item-link"
-        href="/#1/"
+        href="/pages/about"
       >
-        Item 1
+        About Me
+      </a>
+    </li>
+    <li
+      className="menu__list-item"
+    >
+      <a
+        className="menu__list-item-link"
+        href="/pages/contacts"
+      >
+        Contact Me
       </a>
     </li>
   </ul>

src/components/Sidebar/Menu/index.js

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

src/components/Sidebar/Menu/index.ts

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