feat: link to docs from sidebar (#7)

feat: link to docs from sidebar

src/components/Sidebar/index.tsx

@@ -3,9 +3,9 @@ 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 }) {
+function MenuItem({ children, to }: { children: React.ReactNode; to: string }) {
   return (
-    <SC.MenuItem>
+    <SC.MenuItem to={to}>
       {children} <ArrowRight />
     </SC.MenuItem>
   )
@@ -17,12 +17,12 @@ const Sidebar = () => {
       <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>
+        <MenuItem to="/">about</MenuItem>
+        <MenuItem to="/">rules</MenuItem>
+        <MenuItem to="/">faq</MenuItem>
+        <MenuItem to="/">hotbot</MenuItem>
+        <MenuItem to="/docs">documentation</MenuItem>
+        <MenuItem to="/">tech spotlight</MenuItem>
       </SC.Menu>
     </SC.SidebarWrapper>
   )

src/components/Sidebar/styles.tsx

@@ -1,3 +1,4 @@
+import { Link } from "gatsby"
 import styled from "styled-components"
 
 export const SidebarWrapper = styled.aside`
@@ -10,12 +11,37 @@ export const Logo = styled.img`
 
 export const Menu = styled.nav`
   margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 `
 
-export const MenuItem = styled.div`
+export const MenuItem = styled(Link)`
   display: flex;
   align-items: center;
   font-size: 22px;
+  text-decoration: none;
+  color: #555;
+  position: relative;
+  transition: color 0.3s;
+
+  &::after {
+    position: absolute;
+    content: "";
+    height: 2px;
+    transition: width 0.3s;
+    width: 0;
+    bottom: -3px;
+    background: #bf1e2e;
+  }
+
+  &:hover {
+    color: #bf1e2e;
+  }
+
+  &:hover::after {
+    width: calc(100% - 8px - 6px);
+  }
 
   & + & {
     margin-top: 8px;

src/pages/docs.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+
+import DocsLayout from "../components/DocsLayout"
+import SEO from "../components/SEO"
+
+const DocsPage = () => (
+  <DocsLayout>
+    <SEO title="Docs" />
+    the docs
+  </DocsLayout>
+)
+
+export default DocsPage