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

src/layouts/ArchivesLayout/index.tsx

@@ -0,0 +1,8 @@
+import React, { FC } from "react"
+
+import { ArchivesSidebar } from "../../components/ArchivesSidebar"
+import { ColumnLayout } from "../ColumnLayout"
+
+export const ArchivesLayout: FC = ({ children }) => {
+  return <ColumnLayout sidebar={ArchivesSidebar} content={children} />
+}

src/layouts/ColumnLayout/index.tsx

@@ -0,0 +1,48 @@
+import React, { FC, useMemo, useState } from "react"
+
+import { ColumnSidebar } from "../../components/ColumnSidebar"
+import { MobileHeader } from "../../components/MobileHeader"
+import { GlobalStyles } from "../../globalStyles"
+import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
+import { SidebarProvider } from "../../SidebarProvider"
+import { ThemeProvider } from "../../ThemeProvider"
+import * as SC from "./styles"
+
+interface IColumnLayoutProps {
+  sidebar: React.ReactNode
+  content: React.ReactNode
+}
+
+export const ColumnLayout: FC<IColumnLayoutProps> = ({ sidebar, content }) => {
+  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} />
+          {sidebar({ className: activeMobileMenu ? "is-open" : "" })}
+          <SC.MainContent>
+            <SC.Container>{content}</SC.Container>
+          </SC.MainContent>
+        </SC.Main>
+        <SC.Overlay
+          className={activeMobileMenu ? "is-open" : ""}
+          onClick={closeMenu}
+        />
+      </SidebarProvider>
+    </ThemeProvider>
+  )
+}

src/layouts/Layout/index.tsx

@@ -1,10 +1,3 @@
-/**
- * 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, useEffect } from "react"
 

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/index.tsx

@@ -1,6 +1,7 @@
 import { WindowLocation } from "@reach/router"
-import React, { PropsWithChildren } from "react"
+import React, { PropsWithChildren, useMemo } from "react"
 import { LocationProvider } from "../LocationProvider"
+import { ArchivesLayout } from "./ArchivesLayout"
 import { Layout } from "./Layout"
 import { ResourcesLayout } from "./ResourcesLayout"
 
@@ -14,13 +15,20 @@ export default function BaseLayout({
   }
   location: WindowLocation
 }>) {
+  const ResolvedLayout = useMemo(() => {
+    switch (pageContext.layout) {
+      case "resources":
+        return ResourcesLayout
+      case "archives":
+        return ArchivesLayout
+      default:
+        return Layout
+    }
+  }, [pageContext.layout])
+
   return (
     <LocationProvider location={location}>
-      {pageContext.layout === "resources" ? (
-        <ResourcesLayout>{children}</ResourcesLayout>
-      ) : (
-        <Layout>{children}</Layout>
-      )}
+      <ResolvedLayout>{children}</ResolvedLayout>
     </LocationProvider>
   )
 }