Upgrade to Gatsby v2

src/components/Sidebar/Author/Author.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import profilePic from '../../../pages/photo.jpg';
+import styles from './Author.module.scss';
+
+const Author = ({ author, isIndex }) => (
+  <div className={styles['author']}>
+    <Link to="/">
+      <img
+        src={profilePic}
+        className={styles['author__photo']}
+        width="75"
+        height="75"
+        alt={author.name}
+      />
+    </Link>
+
+    { isIndex ? (
+      <h1 className={styles['author__title']}>
+        <Link className={styles['author__title-link']} to="/">{author.name}</Link>
+      </h1>
+    ) :
+      <h2 className={styles['author__title']}>
+        <Link className={styles['author__title-link']} to="/">{author.name}</Link>
+      </h2>
+    }
+
+    <p className={styles['author__subtitle']}>{author.bio}</p>
+  </div>
+);
+
+export default Author;

src/components/Sidebar/Author/Author.module.scss

@@ -0,0 +1,36 @@
+@import '../../../assets/scss/variables';
+@import '../../../assets/scss/mixins';
+
+.author {
+  &__photo {
+    display: inline-block;
+    margin-bottom: 0;
+    border-radius: 50%;
+    background-clip: padding-box
+  }
+
+  &__title {
+    font-size: $typographic-base-font-size * 1.125;
+    font-weight: 600;
+    @include line-height(1.125);
+    @include margin(.5, 0, .5, 0);
+
+    &-link {
+      color: $color-base;
+
+      &:hover,
+      &:focus {
+        color: $color-base
+      }
+
+    }
+
+  }
+
+  &__subtitle {
+    color: $color-gray;
+    @include line-height(1);
+    @include margin-bottom(1)
+  }
+
+}

src/components/Sidebar/Author/Author.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Author from './Author';
+
+describe('Author', () => {
+  const props = {
+    author: {
+      name: 'test',
+      bio: 'test'
+    }
+  };
+
+  it('renders correctly', () => {
+    const tree = renderer.create(<Author {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Author renders correctly 1`] = `
+<div
+  className="author"
+>
+  <Link
+    to="/"
+  >
+    <img
+      alt="test"
+      className="author__photo"
+      height="75"
+      src="file"
+      width="75"
+    />
+  </Link>
+  <h2
+    className="author__title"
+  >
+    <Link
+      className="author__title-link"
+      to="/"
+    >
+      test
+    </Link>
+  </h2>
+  <p
+    className="author__subtitle"
+  >
+    test
+  </p>
+</div>
+`;

src/components/Sidebar/Author/index.js

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

src/components/Sidebar/Contacts/Contacts.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { getContactHref, getIcon } from '../../../utils';
+import Icon from '../../Icon';
+import styles from './Contacts.module.scss';
+
+const Contacts = ({ contacts }) => (
+  <div className={styles['contacts']}>
+    <ul className={styles['contacts__list']}>
+      {Object.keys(contacts).map((name) => (
+        <li className={styles['contacts__list-item']} key={name}>
+          <a
+            className={styles['contacts__list-item-link']}
+            href={getContactHref(name, contacts[name])}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <Icon icon={getIcon(name)} />
+          </a>
+        </li>
+      ))}
+    </ul>
+  </div>
+);
+
+export default Contacts;

src/components/Sidebar/Contacts/Contacts.module.scss

@@ -0,0 +1,47 @@
+@import '../../../assets/scss/variables';
+@import '../../../assets/scss/mixins';
+
+.contacts {
+  @include margin-bottom(1);
+
+  &__list {
+    display: flex;
+    flex-flow: row wrap;
+    flex-grow: 0;
+    flex-shrink: 0;
+    list-style: none;
+    padding: 0;
+    margin: 10px -3px;
+    width: 104px;
+
+    &-item {
+      padding: 0;
+      display: flex;
+      align-content: center;
+      align-items: center;
+      justify-content: center;
+      margin: 3px;
+      height: 28px;
+      width: 28px;
+      line-height: 28px;
+      border-radius: 50%;
+      text-align: center;
+      background: $color-gray-bg;
+
+      &-link {
+        border: 0;
+        display: flex;
+        color: lighten($color-base, 20%);
+  
+        &:hover,
+        &:focus {
+          color: $color-base;
+        }
+
+      }
+
+    }
+
+  }
+
+}

src/components/Sidebar/Contacts/Contacts.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Contacts from './Contacts';
+
+describe('Contacts', () => {
+  const props = {
+    contacts: {
+      email: '#',
+      twitter: '#',
+      vkontakte: '#',
+      github: '#',
+      rss: '#',
+      telegram: '#'
+    }
+  };
+
+  it('renders correctly', () => {
+    const tree = renderer.create(<Contacts {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,126 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Contacts renders correctly 1`] = `
+<div
+  className="contacts"
+>
+  <ul
+    className="contacts__list"
+  >
+    <li
+      className="contacts__list-item"
+    >
+      <a
+        className="contacts__list-item-link"
+        href="mailto:#"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <svg
+          className="icon"
+          viewBox="0 0 28 28"
+        >
+          <path
+            d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
+          />
+        </svg>
+      </a>
+    </li>
+    <li
+      className="contacts__list-item"
+    >
+      <a
+        className="contacts__list-item-link"
+        href="https://www.twitter.com/#"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <svg
+          className="icon"
+          viewBox="0 0 26 28"
+        >
+          <path
+            d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
+          />
+        </svg>
+      </a>
+    </li>
+    <li
+      className="contacts__list-item"
+    >
+      <a
+        className="contacts__list-item-link"
+        href="https://vk.com/#"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <svg
+          className="icon"
+          viewBox="0 0 31 28"
+        >
+          <path
+            d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
+          />
+        </svg>
+      </a>
+    </li>
+    <li
+      className="contacts__list-item"
+    >
+      <a
+        className="contacts__list-item-link"
+        href="https://github.com/#"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <svg
+          className="icon"
+          viewBox="0 0 26 28"
+        >
+          <path
+            d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
+          />
+        </svg>
+      </a>
+    </li>
+    <li
+      className="contacts__list-item"
+    >
+      <a
+        className="contacts__list-item-link"
+        href="#"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <svg
+          className="icon"
+          viewBox="0 0 22 28"
+        >
+          <path
+            d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
+          />
+        </svg>
+      </a>
+    </li>
+    <li
+      className="contacts__list-item"
+    >
+      <a
+        className="contacts__list-item-link"
+        href="telegram:#"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <svg
+          className="icon"
+          viewBox="0 0 28 28"
+        >
+          <path
+            d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
+          />
+        </svg>
+      </a>
+    </li>
+  </ul>
+</div>
+`;

src/components/Sidebar/Contacts/index.js

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

src/components/Sidebar/Copyright/Copyright.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './Copyright.module.scss';
+
+const Copyright = ({ copyright }) => (
+  <div className={styles['copyright']}>
+    {copyright}
+  </div>
+);
+
+export default Copyright;

src/components/Sidebar/Copyright/Copyright.module.scss

@@ -0,0 +1,7 @@
+@import '../../../assets/scss/variables';
+@import '../../../assets/scss/mixins';
+
+.copyright {
+  color: lighten($color-gray, 18%);
+  font-size: $typographic-small-font-size;
+}

src/components/Sidebar/Copyright/Copyright.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Copyright from './Copyright';
+
+describe('Copyright', () => {
+  it('renders correctly', () => {
+    const props = {
+      copyright: 'copyright'
+    };
+
+    const tree = renderer.create(<Copyright {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Copyright renders correctly 1`] = `
+<div
+  className="copyright"
+>
+  copyright
+</div>
+`;

src/components/Sidebar/Copyright/index.js

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

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';

src/components/Sidebar/Sidebar.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { graphql, StaticQuery } from 'gatsby';
+import Author from './Author';
+import Contacts from './Contacts';
+import Copyright from './Copyright';
+import Menu from './Menu';
+import styles from './Sidebar.module.scss';
+
+export const PureSidebar = ({ data, isIndex }) => {
+  const {
+    author,
+    copyright,
+    menu
+  } = data.site.siteMetadata;
+
+  return (
+    <div className={styles['sidebar']}>
+      <div className={styles['sidebar__inner']}>
+        <Author author={author} isIndex={isIndex} />
+        <Menu menu={menu} />
+        <Contacts contacts={author.contacts} />
+        <Copyright copyright={copyright} />
+      </div>
+    </div>
+  );
+};
+
+export const Sidebar = (props) => (
+  <StaticQuery
+    query={graphql`
+      query SidebarQuery {
+        site {
+          siteMetadata {
+            title
+            subtitle
+            copyright
+            menu {
+              label
+              path
+            }
+            author {
+              name
+              bio
+              contacts {       
+                twitter
+                telegram
+                github
+                email
+                rss
+                vkontakte
+              }
+            }
+          }
+        }
+      }
+    `}
+    render={(data) => <PureSidebar {...props} data={data}/>}
+  />
+);
+
+export default Sidebar;

src/components/Sidebar/Sidebar.module.scss

@@ -0,0 +1,39 @@
+@import '../../assets/scss/variables';
+@import '../../assets/scss/mixins';
+
+.sidebar {
+    width: 100%;
+    &__inner {
+        position: relative;
+        padding: 25px 20px 0;
+    }
+}
+
+@include breakpoint-sm {
+    .sidebar {
+        lost-column: 5/12;
+        &__inner {
+            padding: 30px 20px 0;
+            &:after {
+                background: $color-gray-border;
+                background: linear-gradient(to bottom, $color-gray-border 0%, $color-gray-border 48%, $color-white 100%);
+                position: absolute;
+                content: '';
+                width: 1px;
+                height: 540px;
+                top: 30px;
+                right: -10px;
+                bottom: 0;
+            }
+        }
+    }
+}
+
+@include breakpoint-md {
+    .sidebar {
+        lost-column: 1/3;
+        &__inner {
+            padding: 40px;
+        }
+    }
+}

src/components/Sidebar/Sidebar.test.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { PureSidebar as Sidebar } from './Sidebar';
+
+describe('Sidebar', () => {
+  it('renders correctly', () => {
+    const props = {
+      data: {
+        site: {
+          siteMetadata: {
+            author: {
+              name: 'name',
+              bio: 'bio',
+              contacts: {
+                email: '#',
+                twitter: '#',
+                vkontakte: '#',
+                github: '#',
+                rss: '#',
+                telegram: '#'
+              }
+            },
+            copyright: 'copyright',
+            menu: [
+              {
+                label: 'Item 0',
+                path: '/#0/'
+              },
+              {
+                label: 'Item 1',
+                path: '/#1/'
+              }
+            ]
+          }
+        }
+      }
+    };
+
+    const tree = renderer.create(<Sidebar {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sidebar renders correctly 1`] = `
+<div
+  className="sidebar"
+>
+  <div
+    className="sidebar__inner"
+  >
+    <div
+      className="author"
+    >
+      <Link
+        to="/"
+      >
+        <img
+          alt="name"
+          className="author__photo"
+          height="75"
+          src="file"
+          width="75"
+        />
+      </Link>
+      <h2
+        className="author__title"
+      >
+        <Link
+          className="author__title-link"
+          to="/"
+        >
+          name
+        </Link>
+      </h2>
+      <p
+        className="author__subtitle"
+      >
+        bio
+      </p>
+    </div>
+    <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>
+    <div
+      className="contacts"
+    >
+      <ul
+        className="contacts__list"
+      >
+        <li
+          className="contacts__list-item"
+        >
+          <a
+            className="contacts__list-item-link"
+            href="mailto:#"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <svg
+              className="icon"
+              viewBox="0 0 28 28"
+            >
+              <path
+                d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
+              />
+            </svg>
+          </a>
+        </li>
+        <li
+          className="contacts__list-item"
+        >
+          <a
+            className="contacts__list-item-link"
+            href="https://www.twitter.com/#"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <svg
+              className="icon"
+              viewBox="0 0 26 28"
+            >
+              <path
+                d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
+              />
+            </svg>
+          </a>
+        </li>
+        <li
+          className="contacts__list-item"
+        >
+          <a
+            className="contacts__list-item-link"
+            href="https://vk.com/#"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <svg
+              className="icon"
+              viewBox="0 0 31 28"
+            >
+              <path
+                d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
+              />
+            </svg>
+          </a>
+        </li>
+        <li
+          className="contacts__list-item"
+        >
+          <a
+            className="contacts__list-item-link"
+            href="https://github.com/#"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <svg
+              className="icon"
+              viewBox="0 0 26 28"
+            >
+              <path
+                d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
+              />
+            </svg>
+          </a>
+        </li>
+        <li
+          className="contacts__list-item"
+        >
+          <a
+            className="contacts__list-item-link"
+            href="#"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <svg
+              className="icon"
+              viewBox="0 0 22 28"
+            >
+              <path
+                d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
+              />
+            </svg>
+          </a>
+        </li>
+        <li
+          className="contacts__list-item"
+        >
+          <a
+            className="contacts__list-item-link"
+            href="telegram:#"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <svg
+              className="icon"
+              viewBox="0 0 28 28"
+            >
+              <path
+                d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
+              />
+            </svg>
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="copyright"
+    >
+      copyright
+    </div>
+  </div>
+</div>
+`;

src/components/Sidebar/index.js

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

src/components/Sidebar/index.jsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import Link from 'gatsby-link';
-import Menu from '../Menu';
-import Links from '../Links';
-import profilePic from '../../pages/photo.jpg';
-import './style.scss';
-
-class Sidebar extends React.Component {
-  render() {
-    const { location } = this.props;
-    const { author, subtitle, copyright, menu } = this.props.siteMetadata;
-    const isHomePage = get(location, 'pathname', '/') === '/';
-
-    /* eslint-disable jsx-a11y/img-redundant-alt */
-    const authorBlock = (
-      <div>
-        <Link to="/">
-          <img
-            src={profilePic}
-            className="sidebar__author-photo"
-            width="75"
-            height="75"
-            alt={author.name}
-          />
-        </Link>
-        { isHomePage ? (
-          <h1 className="sidebar__author-title">
-            <Link className="sidebar__author-title-link" to="/">{author.name}</Link>
-          </h1>
-        ) :
-          <h2 className="sidebar__author-title">
-            <Link className="sidebar__author-title-link" to="/">{author.name}</Link>
-          </h2>
-        }
-        <p className="sidebar__author-subtitle">{subtitle}</p>
-      </div>
-    );
-    /* eslint-enable jsx-a11y/img-redundant-alt */
-
-    return (
-      <div className="sidebar">
-        <div className="sidebar__inner">
-          <div className="sidebar__author">
-            {authorBlock}
-          </div>
-          <div>
-            <Menu data={menu} />
-            <Links data={author} />
-            <p className="sidebar__copyright">
-              {copyright}
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Sidebar;
-
-export const conponentQuery = graphql`
-  fragment sidebarFragment on siteMetadata_2{
-    title
-    subtitle
-    copyright
-    menu {
-      label
-      path
-    }
-    author {
-      name
-      email
-      telegram
-      twitter
-      github
-      rss
-      vk
-    }
-  }
-`;
-

src/components/Sidebar/style.scss

@@ -1,69 +0,0 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
-
-.sidebar {
-    width: 100%;
-    &__inner {
-        position: relative;
-        padding: 25px 20px 0;
-    }
-    &__author {
-        &-photo {
-            display: inline-block;
-            margin-bottom: 0;
-            border-radius: 50%;
-            background-clip: padding-box;
-        }
-        &-title {
-            font-size: $typographic-base-font-size * 1.125;
-            font-weight: 500;
-            @include line-height(1.125);
-            @include margin(.5, 0, .5, 0);
-            &-link {
-                color: $color-base;
-                &:hover,
-                &:focus {
-                    color: $color-base;
-                }
-            }
-        }
-        &-subtitle {
-            color: $color-gray;
-            @include line-height(1);
-            @include margin-bottom(1);
-        }
-    }
-    &__copyright {
-        color: lighten($color-gray, 18%);
-        font-size: $typographic-small-font-size;
-    }
-}
-
-@include breakpoint-sm {
-    .sidebar {
-        lost-column: 5/12;
-        &__inner {
-            padding: 30px 20px 0;
-            &:after {
-                background: $color-gray-border;
-                background: linear-gradient(to bottom, $color-gray-border 0%, $color-gray-border 48%, $color-white 100%);
-                position: absolute;
-                content: "";
-                width: 1px;
-                height: 540px;
-                top: 30px;
-                right: -10px;
-                bottom: 0;
-            }
-        }
-    }
-}
-
-@include breakpoint-md {
-    .sidebar {
-        lost-column: 1/3;
-        &__inner {
-            padding: 40px;
-        }
-    }
-}