feat: move about & rules pages to the sidebar layout

src/layouts/Layout/index.tsx

@@ -1,20 +1,20 @@
 import { RouteComponentProps } from "@reach/router"
 import React, { FC, Fragment, useEffect } from "react"
 
-import { Container } from "../../components/Container"
-import { HomeFooter } from "../../components/HomeFooter"
 import { HomeHeader } from "../../components/HomeHeader"
 import { SEO } from "../../components/SEO"
-import { WavesBottom } from "../../components/Waves"
+import { Sidebar } from "../../components/Sidebar"
 import { GlobalStyles } from "../../globalStyles"
 import useLocation from "../../hooks/useLocation"
 import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
 import { ThemeProvider } from "../../ThemeProvider"
+import { ColumnLayout } from "../ColumnLayout"
 import * as SC from "./styles"
 
-export const Layout: FC<RouteComponentProps> = ({ children }) => {
+export const Layout: FC<RouteComponentProps> = ({ path, children }) => {
   const { isHome } = useLocation()
   const { locked, unlock } = useLockBodyScroll()
+  const pageName = path?.split("/")[1] === "rules" ? "Rules" : "About"
 
   useEffect(() => {
     if (locked) {
@@ -37,13 +37,11 @@ export const Layout: FC<RouteComponentProps> = ({ children }) => {
         )}
         {!isHome && (
           <Fragment>
-            <HomeHeader isHome={isHome} />
-            <SC.MainContent>
-              <Container>{children}</Container>
-            </SC.MainContent>
-            <HomeFooter />
-            <WavesBottom />
-            <SC.WavesSpacer />
+            <ColumnLayout
+              title={pageName}
+              sidebar={Sidebar}
+              content={children}
+            />
           </Fragment>
         )}
       </SC.LayoutWrapper>

src/layouts/index.tsx

@@ -28,7 +28,7 @@ export default function BaseLayout({
 
   return (
     <LocationProvider location={location}>
-      <ResolvedLayout>{children}</ResolvedLayout>
+      <ResolvedLayout path={location.pathname}>{children}</ResolvedLayout>
     </LocationProvider>
   )
 }