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

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>
+  )
+}