refact: extract layout components to the layouts directory

src/components/Layout/index.tsx

@@ -1,43 +0,0 @@
-/**
- * Layout component that queries for data
- * with Gatsby's useStaticQuery component
- *
- * See: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
-import { RouteComponentProps } from '@reach/router'
-import React, { FC, Fragment } from "react"
-
-import { GlobalStyles } from "../../globalStyles"
-import { ThemeProvider } from "../../ThemeProvider"
-import { Container } from "../Container"
-import { Footer } from "../Footer"
-import { Header } from "../Header"
-import { WavesBottom } from "../Waves"
-import * as SC from "./styles"
-
-export const Layout: FC<RouteComponentProps> = ({
-  children,
-  location,
-}) => {
-  const isHome = location ? location.pathname === "/" : false
-
-  return (
-    <ThemeProvider>
-      <SC.LayoutWrapper>
-        <GlobalStyles />
-        <Header isHome={isHome} />
-        {!isHome && (
-          <Fragment>
-            <SC.MainContent>
-              <Container>{children}</Container>
-            </SC.MainContent>
-            <Footer />
-            <WavesBottom />
-            <SC.WavesSpacer />
-          </Fragment>
-        )}
-      </SC.LayoutWrapper>
-    </ThemeProvider>
-  )
-}

src/components/Layout/styles.tsx

@@ -1,41 +0,0 @@
-import styled from "styled-components"
-
-export const LayoutWrapper = styled.div`
-  background: #121240;
-  color: #fff;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`
-
-export const MainContent = styled.main`
-  margin-top: 64px;
-  display: flex;
-  justify-content: center;
-  width: 800px;
-  max-width: calc(100% - 64px);
-  padding: 0 32px;
-
-  .anchor svg path {
-    fill: #fff;
-  }
-
-  a:not(.anchor) {
-    color: #0090d8;
-    font-weight: 700;
-    border-bottom: 2px solid;
-    text-decoration: none;
-    transition: color 0.3s;
-
-    &:hover,
-    &:focus {
-      color: #5dbbea;
-      transition: none;
-    }
-  }
-`
-
-export const WavesSpacer = styled.div`
-  height: 50vw;
-`

src/components/ResourcesLayout/index.tsx

@@ -1,46 +0,0 @@
-/**
- * Layout component that queries for data
- * with Gatsby's useStaticQuery component
- *
- * See: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
-import React, { FC, useState } from "react"
-
-import { GlobalStyles } from "../../globalStyles"
-import { SidebarProvider } from "../../SidebarProvider"
-import { ThemeProvider } from "../../ThemeProvider"
-import { MobileHeader } from "../MobileHeader"
-import { ResourcesSidebar } from "../ResourcesSidebar"
-import * as SC from "./styles"
-
-export const ResourcesLayout: FC = ({ children }) => {
-  const [activeMobileMenu, setActiveMobileMenu] = useState(false)
-
-  function openMenu() {
-    setActiveMobileMenu(true)
-  }
-
-  function closeMenu() {
-    setActiveMobileMenu(false)
-  }
-
-  return (
-    <ThemeProvider>
-      <SidebarProvider>
-        <GlobalStyles />
-        <SC.Main>
-          <MobileHeader openMenu={openMenu} />
-          <ResourcesSidebar className={activeMobileMenu ? "is-open" : ""} />
-          <SC.MainContent>
-            <SC.Container>{children}</SC.Container>
-          </SC.MainContent>
-        </SC.Main>
-        <SC.Overlay
-          className={activeMobileMenu ? "is-open" : ""}
-          onClick={closeMenu}
-        />
-      </SidebarProvider>
-    </ThemeProvider>
-  )
-}

src/components/ResourcesLayout/styles.tsx

@@ -1,57 +0,0 @@
-import styled from "styled-components"
-
-export const Main = styled.div`
-  display: flex;
-  width: 100%;
-  min-height: 100vh;
-  background: ${props => props.theme.main.background};
-  color: ${props => props.theme.main.foreground};
-`
-
-export const Overlay = styled.div`
-  z-index: 99;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  transition: background-color 0.3s;
-  background-color: rgba(0, 0, 0, 0);
-  pointer-events: none;
-
-  @media screen and (min-width: 768px) {
-    display: none;
-  }
-
-  &.is-open {
-    pointer-events: auto;
-    background-color: rgba(0, 0, 0, 0.2);
-  }
-`
-
-export const MainContent = styled.main`
-  flex: 1 1 auto;
-  margin-top: 128px;
-  margin-left: 320px;
-  width: calc(100% - 320px);
-
-  @media screen and (max-width: 767px) {
-    margin-left: 0;
-    width: 100%;
-  }
-
-  & > :first-child {
-    margin-top: 0;
-  }
-
-  & > :last-child {
-    margin-bottom: 0;
-  }
-`
-
-export const Container = styled.div`
-  width: 650px;
-  max-width: calc(100% - 64px);
-  padding: 0 32px;
-  margin: 0 auto;
-`