diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-09-14 12:18:12 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-09-14 12:18:12 -0400 |
| commit | 2d145b026cfdf54a63bef0b9d6324b6785390307 (patch) | |
| tree | f6c1d8f987437803a5c026e70535bf9ff244e885 /stepped-solutions/FINISHED/frontend/components/Header.js | |
| parent | 8a5825d52271d712ec7c8348447d433067e13ef2 (diff) | |
move finished folder
Diffstat (limited to 'stepped-solutions/FINISHED/frontend/components/Header.js')
| -rw-r--r-- | stepped-solutions/FINISHED/frontend/components/Header.js | 75 |
1 files changed, 0 insertions, 75 deletions
diff --git a/stepped-solutions/FINISHED/frontend/components/Header.js b/stepped-solutions/FINISHED/frontend/components/Header.js deleted file mode 100644 index 797eb8e..0000000 --- a/stepped-solutions/FINISHED/frontend/components/Header.js +++ /dev/null @@ -1,75 +0,0 @@ -import Link from 'next/link'; -import styled from 'styled-components'; -import NProgress from 'nprogress'; -import Router from 'next/router'; -import Nav from './Nav'; -import Cart from './Cart'; -import Search from './Search'; - -Router.onRouteChangeStart = () => { - NProgress.start(); -}; -Router.onRouteChangeComplete = () => { - NProgress.done(); -}; - -Router.onRouteChangeError = () => { - NProgress.done(); -}; - -const Logo = styled.h1` - font-size: 4rem; - margin-left: 2rem; - position: relative; - z-index: 2; - transform: skew(-7deg); - a { - padding: 0.5rem 1rem; - background: ${props => props.theme.red}; - color: white; - text-transform: uppercase; - text-decoration: none; - } - @media (max-width: 1300px) { - margin: 0; - text-align: center; - } -`; - -const StyledHeader = styled.header` - .bar { - border-bottom: 10px solid ${props => props.theme.black}; - display: grid; - grid-template-columns: auto 1fr; - justify-content: space-between; - align-items: stretch; - @media (max-width: 1300px) { - grid-template-columns: 1fr; - justify-content: center; - } - } - .sub-bar { - display: grid; - grid-template-columns: 1fr auto; - border-bottom: 1px solid ${props => props.theme.lightgrey}; - } -`; - -const Header = () => ( - <StyledHeader> - <div className="bar"> - <Logo> - <Link href="/"> - <a>Sick Fits</a> - </Link> - </Logo> - <Nav /> - </div> - <div className="sub-bar"> - <Search /> - </div> - <Cart /> - </StyledHeader> -); - -export default Header; |
