diff options
| author | Wes Bos <wesbos@gmail.com> | 2017-09-21 15:39:12 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2017-09-21 15:39:12 -0400 |
| commit | 3b45dd7b593825721ec9ee9f6a49c732601b1ae0 (patch) | |
| tree | a2e8e73d6b6b6bc32eda2bb79af817397e4304f5 /components/Nav.js | |
| parent | 1450e579c67e3d969cb099dfe6c1cefd1e313fb5 (diff) | |
Cha Ching
Diffstat (limited to 'components/Nav.js')
| -rw-r--r-- | components/Nav.js | 54 |
1 files changed, 45 insertions, 9 deletions
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; |