feat(archives): bootstrap what-is-archives from Github

src/layouts/ResourcesLayout/index.tsx

@@ -1,50 +1,8 @@
-/**
- * Layout component that queries for data
- * with Gatsby's useStaticQuery component
- *
- * See: https://www.gatsbyjs.org/docs/use-static-query/
- */
+import React, { FC } from "react"
 
-import React, { FC, useState } from "react"
-
-import { MobileHeader } from "../../components/MobileHeader"
 import { ResourcesSidebar } from "../../components/ResourcesSidebar"
-import { GlobalStyles } from "../../globalStyles"
-import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
-import { SidebarProvider } from "../../SidebarProvider"
-import { ThemeProvider } from "../../ThemeProvider"
-import * as SC from "./styles"
+import { ColumnLayout } from "../ColumnLayout"
 
 export const ResourcesLayout: FC = ({ children }) => {
-  const [activeMobileMenu, setActiveMobileMenu] = useState(false)
-  const { lock, unlock } = useLockBodyScroll()
-
-  function openMenu() {
-    setActiveMobileMenu(true)
-    lock()
-  }
-
-  function closeMenu() {
-    setActiveMobileMenu(false)
-    unlock()
-  }
-
-  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>
-  )
+  return <ColumnLayout sidebar={ResourcesSidebar} content={children} />
 }

src/layouts/ResourcesLayout/styles.tsx

@@ -1,56 +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: 128px 0 128px 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;
-`