ui: update header/nav style to match layout (#22)

ui: update header/nav style to match layout

src/components/Container/styles.tsx

@@ -3,10 +3,13 @@ import styled from "styled-components"
 export const ContainerWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 0 32px;
+  /* the 172px is necessary because the logo is offset by that much */
+  /* this ensures the logo never goes off screen */
+  /* TODO: most likely extract this number */
+  padding: 0 calc(172px + 32px);
   margin: 0 auto;
   width: 100%;
-  max-width: 1015px;
+  max-width: 800px;
 
   & > :first-child {
     margin-top: 0;

src/components/Header/index.tsx

@@ -0,0 +1,33 @@
+import React, { PropsWithChildren } from "react"
+import { Container } from "../Container"
+import logo from "../../images/tph-logo.png"
+import * as SC from "./styles"
+
+function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
+  return (
+    <SC.MenuItem to={to} activeClassName="active">
+      {children}
+    </SC.MenuItem>
+  )
+}
+
+export function Header() {
+  return (
+    <SC.HeaderWrapper>
+      <Container>
+        <SC.InnerWrapper>
+          <SC.Logo src={logo} />
+
+          <SC.Menu>
+            <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.InnerWrapper>
+      </Container>
+    </SC.HeaderWrapper>
+  )
+}

src/components/Header/styles.tsx

@@ -0,0 +1,83 @@
+import { Link } from "gatsby"
+import styled from "styled-components"
+
+export const HeaderWrapper = styled.header``
+
+export const InnerWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 122px;
+`
+
+export const Logo = styled.img`
+  position: absolute;
+  margin-right: 50px;
+  left: calc(-122px - 50px);
+  width: 122px;
+  height: 122px;
+`
+
+export const Menu = styled.nav`
+  margin-top: 16px;
+  display: flex;
+  align-items: flex-start;
+`
+
+export const MenuItem = styled(Link)`
+  display: flex;
+  align-items: center;
+  font-size: 22px;
+  text-decoration: none;
+  color: #555;
+  position: relative;
+  transition: color 0.3s;
+
+  /* underline bar, getting animated through hover */
+  &::after {
+    z-index: -1;
+    position: absolute;
+    content: "";
+    height: 2px;
+    width: 100%;
+    margin-top: -3px;
+    bottom: 0;
+    background: #555;
+    transition: all 0.3s;
+  }
+
+  &:hover {
+    color: #fff;
+  }
+
+  &:hover::after {
+    padding: 8px;
+    height: 100%;
+    background: #000;
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 5px 11px rgba(0, 0, 0, 0.25);
+    margin-left: -8px;
+    margin-bottom: -8px;
+    border-radius: 3px;
+  }
+
+  &.active {
+    font-weight: 700;
+    color: #d33636;
+
+    &::after {
+      background: #d33636;
+    }
+
+    &:hover {
+      color: #fff;
+    }
+
+    &:hover::after {
+      background: #d33636;
+    }
+  }
+
+  & + & {
+    margin-left: 48px;
+  }
+`

src/components/Layout/index.tsx

@@ -10,7 +10,7 @@ import { useStaticQuery, graphql } from "gatsby"
 
 import { Container } from "../Container"
 import { Footer } from "../Footer"
-import { Sidebar } from "../Sidebar"
+import { Header } from "../Header"
 import "./layout.scss"
 import * as SC from "./styles"
 import Scrollbar from "react-perfect-scrollbar"
@@ -29,15 +29,15 @@ export function Layout({ children }: PropsWithChildren<{}>) {
 
   return (
     <Scrollbar>
-      <Container>
+      <SC.Main>
-        <SC.Main>
+        <Header />
-          <Sidebar />
+        <SC.MainContent>
-          <SC.MainContent>
+          <Container>
             <h1>{data.site.siteMetadata.title}</h1>
             {children}
-          </SC.MainContent>
+          </Container>
-        </SC.Main>
+        </SC.MainContent>
-      </Container>
+      </SC.Main>
       <Footer />
     </Scrollbar>
   )

src/components/Layout/styles.tsx

@@ -2,6 +2,7 @@ import styled from "styled-components"
 
 export const Main = styled.div`
   display: flex;
+  flex-direction: column;
   margin: 128px auto 64px !important;
   width: 100%;
 `

src/components/Sidebar/index.tsx

@@ -1,29 +0,0 @@
-import React, { PropsWithChildren } from "react"
-import logo from "../../images/tph-logo.png"
-import * as SC from "./styles"
-import ArrowRight from "../../icons/arrow-right.svg"
-
-function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
-  return (
-    <SC.MenuItem to={to}>
-      {children} <ArrowRight />
-    </SC.MenuItem>
-  )
-}
-
-export function Sidebar() {
-  return (
-    <SC.SidebarWrapper>
-      <SC.Logo src={logo} />
-
-      <SC.Menu>
-        <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,55 +0,0 @@
-import { Link } from "gatsby"
-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;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-`
-
-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;
-  }
-
-  svg {
-    margin-left: 6px;
-    width: 8px;
-    height: 15px;
-  }
-`