refact: extract layout components to the layouts directory

src/layouts/ResourcesLayout/index.tsx

@@ -0,0 +1,46 @@
+/**
+ * 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 { MobileHeader } from "../../components/MobileHeader"
+import { ResourcesSidebar } from "../../components/ResourcesSidebar"
+import { GlobalStyles } from "../../globalStyles"
+import { SidebarProvider } from "../../SidebarProvider"
+import { ThemeProvider } from "../../ThemeProvider"
+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/layouts/ResourcesLayout/styles.tsx

@@ -0,0 +1,57 @@
+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;
+`