From 3b45dd7b593825721ec9ee9f6a49c732601b1ae0 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 21 Sep 2017 15:39:12 -0400
Subject: Cha Ching

---
 components/Nav.js | 54 +++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 45 insertions(+), 9 deletions(-)

(limited to 'components/Nav.js')

diff --git a/components/Nav.js b/components/Nav.js
index ad0b05a..d1f341d 100644
--- a/components/Nav.js
+++ b/components/Nav.js
@@ -1,10 +1,46 @@
-import Link from 'next/link'
+import Link from 'next/link';
+import styled from 'styled-components';
 
-export default () => (
-  <ul>
-    <Link href="/"><a>Home</a></Link>
-    <Link href="/signup"><a>Signup</a></Link>
-    <Link href="/orders"><a>Orders</a></Link>
-    <Link href="/cart"><a>My Cart</a></Link>
-  </ul>
-)
+const StyledUl = styled.ul`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  li {
+    display: flex;
+    flex: 1;
+  }
+  a {
+    padding: 10px;
+    flex: 1;
+    text-decoration: none;
+    text-align: center;
+    background: rgba(0, 0, 0, 0.2);
+    color: white;
+    margin-right: 20px;
+    &:hover {
+      background: rgba(0, 0, 0, 0.3);
+    }
+  }
+`;
+
+const Nav = () => (
+  <StyledUl>
+    <Link prefetch href="/">
+      <a>Home</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>
+  </StyledUl>
+);
+
+export default Nav;
-- 
cgit v1.3