ui: prepare base layout

src/components/Container/index.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+import * as SC from "./styles"
+
+interface ContainerProps {
+  children: React.ReactNode
+}
+
+const Container = ({ children, ...restProps }: ContainerProps): JSX.Element => (
+  <SC.ContainerWrapper {...restProps}>{children}</SC.ContainerWrapper>
+)
+
+export default Container

src/components/Container/styles.tsx

@@ -0,0 +1,18 @@
+import styled from "styled-components"
+
+export const ContainerWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0 32px;
+  margin: 0 auto;
+  width: 100%;
+  max-width: 1015px;
+
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+`

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

src/components/Layout/layout.scss

@@ -1,7 +1,8 @@
 // @import "~prismjs/themes/prism-tomorrow.css";
 
 html {
-  font-family: sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }
@@ -37,106 +38,3 @@ body {
   padding-left: 2.8em;
   overflow: initial;
 }
-
-h1 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 2.25rem;
-  line-height: 1.1;
-}
-h2 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.62671rem;
-  line-height: 1.1;
-}
-h3 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.38316rem;
-  line-height: 1.1;
-}
-h4 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1rem;
-  line-height: 1.1;
-}
-h5 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.85028rem;
-  line-height: 1.1;
-}
-h6 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.78405rem;
-  line-height: 1.1;
-}

src/components/Layout/styles.tsx

@@ -1,5 +1,19 @@
-import styled from "styled-components";
+import styled from "styled-components"
+
+export const Main = styled.div`
+  display: flex;
+  margin: 128px auto 64px !important;
+  width: 100%;
+`
 
 export const MainContent = styled.main`
-  padding: 2.5em 0;
-`;
+  flex: 1 0 auto;
+
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+`

src/components/Sidebar/index.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import logo from "../../images/tph-logo.png"
+import * as SC from "./styles"
+import ArrowRight from "../../icons/arrow-right.svg"
+
+function MenuItem({ children }: { children: React.ReactNode }) {
+  return (
+    <SC.MenuItem>
+      {children} <ArrowRight />
+    </SC.MenuItem>
+  )
+}
+
+const Sidebar = () => {
+  return (
+    <SC.SidebarWrapper>
+      <SC.Logo src={logo} />
+
+      <SC.Menu>
+        <MenuItem>about</MenuItem>
+        <MenuItem>rules</MenuItem>
+        <MenuItem>faq</MenuItem>
+        <MenuItem>hotbot</MenuItem>
+        <MenuItem>documentation</MenuItem>
+        <MenuItem>tech spotlight</MenuItem>
+      </SC.Menu>
+    </SC.SidebarWrapper>
+  )
+}
+
+export default Sidebar

src/components/Sidebar/styles.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components"
+
+export const SidebarWrapper = styled.aside`
+  width: 200px;
+`
+
+export const Logo = styled.img`
+  width: 122px;
+`
+
+export const Menu = styled.nav`
+  margin-top: 16px;
+`
+
+export const MenuItem = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 22px;
+
+  & + & {
+    margin-top: 8px;
+  }
+
+  svg {
+    margin-left: 6px;
+    width: 8px;
+    height: 15px;
+  }
+`

src/icons/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 8 15">
+  <path fill="#B0B0B0" fill-rule="nonzero" d="M7.76 6.73L1.25.2A.73.73 0 1 0 .21 1.24l6 6-6 6a.73.73 0 1 0 1.04 1.03l6.51-6.51a.74.74 0 0 0 0-1.03z"/>
+</svg>