From 8f2c595eca30e2d7138c8e8d6685774a8f44e55d Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 15 Feb 2018 16:59:58 -0500
Subject: omg

---
 frontend/components/Nav.js | 98 ++++++++++++++++++++++++++++++++++------------
 1 file changed, 72 insertions(+), 26 deletions(-)

(limited to 'frontend/components/Nav.js')

diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js
index 25965c2..9793087 100644
--- a/frontend/components/Nav.js
+++ b/frontend/components/Nav.js
@@ -1,49 +1,95 @@
-import Link from "next/link";
-import styled from "styled-components";
+import Link from 'next/link';
+import styled from 'styled-components';
+import { userEnhancer } from '../enhancers/enhancers';
+import { compose } from 'react-apollo';
+import ToggleCart from './ToggleCart';
 
 const StyledUl = styled.ul`
   margin: 0;
   padding: 0;
   display: flex;
-  li {
+  justify-self: end;
+  a,
+  button {
+    padding: 0 30px;
     display: flex;
-    flex: 1;
+    align-items: center;
+    position: relative;
+    text-transform: uppercase;
+    font-weight: 900;
+    font-size: 2rem;
+    background: none;
+    border: 0;
+    &:before {
+      content: '';
+      width: 1px;
+      background: ${props => props.theme.lightgrey};
+      height: 100%;
+      left: 0;
+      position: absolute;
+      transform: rotate(20deg);
+      top: 0;
+      bottom: 0;
+    }
+    &:after {
+      height: 2px;
+      background: red;
+      content: '';
+      width: 0;
+      position: absolute;
+      transform: translateX(-50%);
+      transition: width 0.6s;
+      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);
+      }
+    }
   }
-  a {
-    padding: 10px;
-    flex: 1;
-    text-decoration: none;
-    text-align: center;
-    background: rgba(0, 0, 0, 0.2);
+  .cart-count {
+    background: ${props => props.theme.red};
     color: white;
-    margin-right: 20px;
-    &:hover {
-      background: rgba(0, 0, 0, 0.3);
-    }
+    border-radius: 50%;
+    padding: 5px;
+    margin-left: 1rem;
+    font-weight: 100;
+    font-feature-settings: 'tnum';
+    font-variant-numeric: tabular-nums;
   }
 `;
 
-const Nav = () => (
+const Nav = ({ currentUser }) => (
   <StyledUl>
-    <Link prefetch href="/">
-      <a>Home</a>
-    </Link>
     <Link prefetch href="/items">
-      <a>Just Items</a>
+      <a>Shop</a>
+    </Link>
+    <Link prefetch href="/add">
+      <a>Sell</a>
     </Link>
     <Link prefetch href="/signup">
       <a>Sign Up</a>
     </Link>
-    <Link prefetch href="/add">
-      <a>Add an Item</a>
-    </Link>
     <Link prefetch href="/orders">
       <a>Orders</a>
     </Link>
-    <Link prefetch href="/cart">
-      <a>My Cart</a>
-    </Link>
+    {currentUser.me ? (
+      <ToggleCart
+        render={toggle => (
+          <button onClick={toggle}>
+            My Cart
+            <span className="cart-count">
+              {currentUser.me.cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0)}
+            </span>
+          </button>
+        )}
+      />
+    ) : null}
   </StyledUl>
 );
 
-export default Nav;
+export default compose(userEnhancer)(Nav);
-- 
cgit v1.3