ui: prepare base layout

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;
+  }
+`