Stepped Solutions

1 files changed, 47 insertions, 3 deletions

diff --git a/stepped-solutions/07/frontend/components/Header.js b/stepped-solutions/07/frontend/components/Header.js
index 51de94c..5a11aa4 100755
--- a/stepped-solutions/07/frontend/components/Header.js
+++ b/stepped-solutions/07/frontend/components/Header.js
@@ -1,16 +1,60 @@
+import Link from 'next/link';
+import styled from 'styled-components';
 import Nav from './Nav';
 
+const Logo = styled.h1`
+  font-size: 4rem;
+  margin-left: 2rem;
+  position: relative;
+  z-index: 2;
+  transform: skew(-7deg);
+  a {
+    padding: 0.5rem 1rem;
+    background: ${props => props.theme.red};
+    color: white;
+    text-transform: uppercase;
+    text-decoration: none;
+  }
+  @media (max-width: 1300px) {
+    margin: 0;
+    text-align: center;
+  }
+`;
+
+const StyledHeader = styled.header`
+  .bar {
+    border-bottom: 10px solid ${props => props.theme.black};
+    display: grid;
+    grid-template-columns: auto 1fr;
+    justify-content: space-between;
+    align-items: stretch;
+    @media (max-width: 1300px) {
+      grid-template-columns: 1fr;
+      justify-content: center;
+    }
+  }
+  .sub-bar {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    border-bottom: 1px solid ${props => props.theme.lightgrey};
+  }
+`;
+
 const Header = () => (
-  <div>
+  <StyledHeader>
     <div className="bar">
-      <a href="">Sick Fits</a>
+      <Logo>
+        <Link href="/">
+          <a>Sick Fits</a>
+        </Link>
+      </Logo>
       <Nav />
     </div>
     <div className="sub-bar">
       <p>Search</p>
     </div>
     <div>Cart</div>
-  </div>
+  </StyledHeader>
 );
 
 export default Header;