feat: Create Logo component and render inline instead of using a back…

…ground image
newrelic · Jun 16, 2020 · 57d1c15 · 57d1c15
1 parent aac116c
commit 57d1c15
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 8 deletions.
diff --git a/src/components/Logo.js b/src/components/Logo.js
diff --git a/src/components/Logo.module.scss b/src/components/Logo.module.scss
@@ -0,0 +1,3 @@
+.logo {
+  fill: none;
+}
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import cx from 'classnames';
 
+import Logo from './Logo';
 import { link } from '../types';
 import styles from './Sidebar.module.scss';
 
@@ -22,7 +23,9 @@ const renderNav = (page, index) => (
 
 const Sidebar = ({ className, pages, isOpen, toggle }) => (
   <aside className={cx(styles.sidebar, className, { [styles.isOpen]: isOpen })}>
-    <Link to="/" className={styles.logo} />
+    <Link to="/">
+      <Logo className={styles.logo} />
+    </Link>
     <div className={styles.top}>
       <h3>Pages</h3>
       <button

diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
@@ -1,4 +1,7 @@
 .sidebar {
+  padding: 2rem 0;
+  border-right: 1px solid var(--color-neutrals-100);
+
   ul {
     margin: 0;
     padding-left: 1rem;
@@ -9,7 +12,6 @@
     text-decoration: none;
     color: var(--color-black);
     display: inline-block;
-    padding: 0.2rem 0;
 
     &:hover {
       text-decoration: underline;
@@ -59,11 +61,5 @@
 }
 
 .logo {
-  padding: 0;
-  background-size: contain;
-  background-repeat: no-repeat;
   width: 247px;
-  height: 64px;
-  margin-right: 1rem;
-  background-image: url('../images/developers-logo.svg');
 }