diff options
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; |