Add icons

package.json

@@ -31,6 +31,7 @@
     "open-color": "^1.6.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-icons": "^3.7.0",
     "react-transition-group": "^4.0.1",
     "styled-components": "^4.2.0",
     "styled-media-query": "^2.1.1"

src/components/layout/index.js

@@ -4,6 +4,7 @@ import Logo from 'components/logo'
 import Nav from 'components/nav'
 import Search from 'components/search'
 import Widgets from 'components/widgets'
+import { FiMenu } from 'react-icons/fi'
 import { duration, overlayStyles, sideSheetStyles } from './transitions'
 
 import * as S from './styles'
@@ -23,7 +24,9 @@ const Layout = () => {
       </S.Sidebar>
       <S.Content>
         <S.Header>
-          <button onClick={toggleSideSheet}>open</button>
+          <S.SideSheetButton onClick={toggleSideSheet}>
+            <FiMenu />
+          </S.SideSheetButton>
           <Search />
         </S.Header>
         <Widgets />

src/components/layout/styles.js

@@ -68,3 +68,15 @@ export const SideSheet = styled.div`
     z-index: 20;
   `}
 `
+
+export const SideSheetButton = styled.button`
+  ${({ theme: { spacing, colors } }) => css`
+    border: none;
+    background: none;
+    color: ${colors.gray[8]};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  `}
+`

yarn.lock

@@ -5165,6 +5165,13 @@ react-dom@^16.8.6:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
+react-icons@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.7.0.tgz#64fe46231fabfeea27895edeae6c3b78114b8c8f"
+  integrity sha512-7MyPwjIhuyW0D2N3s4DEd0hGPGFf0sK+IIRKhc1FvSpZNVmnUoGvHbmAwzGJU+3my+fvihVWgwU5SDtlAri56Q==
+  dependencies:
+    camelcase "^5.0.0"
+
 react-is@^16.6.0, react-is@^16.8.1:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"