🔖 Upgrade to Gatsby 1.8.12

src/components/Sidebar/index.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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.data.site.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>
+    );
+  }
+}
+
+Sidebar.propTypes = {
+  data: PropTypes.shape({
+    site: PropTypes.shape({
+      siteMetadata: PropTypes.shape({
+        subtitle: PropTypes.string.isRequired,
+        author: PropTypes.object.isRequired,
+        copyright: PropTypes.string.isRequired,
+        menu: PropTypes.array.isRequired
+      })
+    })
+  }),
+  location: PropTypes.object
+};
+
+export default Sidebar;

src/components/Sidebar/style.scss

@@ -0,0 +1,69 @@
+@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;
+        }
+    }
+}