3 files changed, 123 insertions, 0 deletions
diff --git a/stepped-solutions/29/frontend/components/Nav.js b/stepped-solutions/29/frontend/components/Nav.js
new file mode 100755
index 0000000..12abde5
--- /dev/null
+++ b/stepped-solutions/29/frontend/components/Nav.js
@@ -0,0 +1,38 @@
+import Link from 'next/link';
+import NavStyles from './styles/NavStyles';
+import User from './User';
+import Signout from './Signout';
+
+const Nav = () => (
+  <User>
+    {({ data: { me } }) => (
+      <NavStyles>
+        <Link href="/items">
+          <a>Shop</a>
+        </Link>
+        {me && (
+          <>
+            <Link href="/sell">
+              <a>Sell</a>
+            </Link>
+            <Link href="/orders">
+              <a>Orders</a>
+            </Link>
+            <Link href="/me">
+              <a>Account</a>
+            </Link>
+            <Signout />
+          </>
+        )}
+        {!me && (
+          <Link href="/signup">
+            <a>Sign In</a>
+          </Link>
+
+        )}
+      </NavStyles>
+    )}
+  </User>
+);
+
+export default Nav;
diff --git a/stepped-solutions/29/frontend/components/Signout.js b/stepped-solutions/29/frontend/components/Signout.js
new file mode 100755
index 0000000..f852531
--- /dev/null
+++ b/stepped-solutions/29/frontend/components/Signout.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import { Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
+import { CURRENT_USER_QUERY } from './User';
+
+const SIGN_OUT_MUTATION = gql`
+  mutation SIGN_OUT_MUTATION {
+    signout {
+      message
+    }
+  }
+`;
+
+const Signout = props => (
+  <Mutation mutation={SIGN_OUT_MUTATION} refetchQueries={[{ query: CURRENT_USER_QUERY }]}>
+    {signout => <button onClick={signout}>Sign Out</button>}
+  </Mutation>
+);
+export default Signout;
diff --git a/stepped-solutions/29/frontend/components/styles/NavStyles.js b/stepped-solutions/29/frontend/components/styles/NavStyles.js
new file mode 100755
index 0000000..fe4abda
--- /dev/null
+++ b/stepped-solutions/29/frontend/components/styles/NavStyles.js
@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+
+const NavStyles = styled.ul`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-self: end;
+  font-size: 2rem;
+  a,
+  button {
+    padding: 1rem 3rem;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-transform: uppercase;
+    font-weight: 900;
+    font-size: 1em;
+    background: none;
+    border: 0;
+    cursor: pointer;
+    color: ${props => props.theme.black};
+    font-weight: 800;
+    @media (max-width: 700px) {
+      font-size: 10px;
+      padding: 0 10px;
+    }
+    &:before {
+      content: '';
+      width: 2px;
+      background: ${props => props.theme.lightgrey};
+      height: 100%;
+      left: 0;
+      position: absolute;
+      transform: skew(-20deg);
+      top: 0;
+      bottom: 0;
+    }
+    &:after {
+      height: 2px;
+      background: red;
+      content: '';
+      width: 0;
+      position: absolute;
+      transform: translateX(-50%);
+      transition: width 0.4s;
+      transition-timing-function: cubic-bezier(1, -0.65, 0, 2.31);
+      left: 50%;
+      margin-top: 2rem;
+    }
+    &:hover,
+    &:focus {
+      outline: none;
+      &:after {
+        width: calc(100% - 60px);
+      }
+    }
+  }
+  @media (max-width: 1300px) {
+    border-top: 1px solid ${props => props.theme.lightgrey};
+    width: 100%;
+    justify-content: center;
+    font-size: 1.5rem;
+  }
+`;
+
+export default NavStyles;