ui: prepare base layout

src/components/Layout/index.tsx

@@ -8,11 +8,13 @@
 import React, { PropsWithChildren } from "react"
 import { useStaticQuery, graphql } from "gatsby"
 
+import Container from "../Container"
 import Navbar from "../Navbar"
+import Sidebar from "../Sidebar"
 import "./layout.scss"
-import { MainContent } from "./styles";
+import { Main, MainContent } from "./styles"
 import Scrollbar from "react-perfect-scrollbar"
-import "react-perfect-scrollbar/dist/css/styles.css";
+import "react-perfect-scrollbar/dist/css/styles.css"
 
 const Layout = ({ children }: PropsWithChildren<{}>) => {
   const data = useStaticQuery(graphql`
@@ -27,22 +29,22 @@ const Layout = ({ children }: PropsWithChildren<{}>) => {
 
   return (
     <Scrollbar>
-      <Navbar siteTitle={data.site.siteMetadata.title} />
-      <div
-        style={{
-          margin: `0 auto`,
-          maxWidth: 960,
-          padding: `0px 1.0875rem 1.45rem`,
-          paddingTop: 0,
-        }}
-      >
-        <MainContent>{children}</MainContent>
-        <footer>
+      <Container>
+        <Main>
+          <Sidebar />
+          <MainContent>
+            <h1>{data.site.siteMetadata.title}</h1>
+            {children}
+          </MainContent>
+        </Main>
+      </Container>
+      <footer>
+        <Container>
           © {new Date().getFullYear()}, Built with
           {` `}
           <a href="https://www.gatsbyjs.org">Gatsby</a>
-        </footer>
-      </div>
+        </Container>
+      </footer>
     </Scrollbar>
   )
 }