diff options
Diffstat (limited to 'packages/website/ts/@next/components/header.tsx')
| -rw-r--r-- | packages/website/ts/@next/components/header.tsx | 222 |
1 files changed, 190 insertions, 32 deletions
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index a6bbe4d65..e4add9ecf 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -3,48 +3,206 @@ import * as React from 'react'; import { Link as ReactRouterLink } from 'react-router-dom'; import styled from 'styled-components'; +import { colors } from 'ts/style/colors'; + import { Button, ButtonWrap, Link } from 'ts/@next/components/button'; +import { DevelopersDropDown } from 'ts/@next/components/dropdowns/developers_drop_down'; +import { Hamburger } from 'ts/@next/components/hamburger'; import { Section, Wrap } from 'ts/@next/components/layout'; import { Logo } from 'ts/@next/components/logo'; +import { Paragraph } from 'ts/@next/components/text'; interface HeaderProps { + isOpen: boolean; + location?: Location; +} + +interface HeaderState { + isOpen: boolean; +} + +interface HeaderState { + isOpen: boolean; +} + +interface NavItem { + url?: string; + id?: string; + text?: string; } -const links = [ - { url: '/next/why', text: 'Why 0x' }, - { url: '/next/0x-instant', text: 'Products' }, - { url: '#', text: 'Developers' }, - { url: '/next/about/mission', text: 'About' }, - { url: '#', text: 'Blog' }, +const mobileProductLinks = [ + { url: '/next/0x-instant', text: '0x Instant' }, + { url: '/next/launch-kit', text: '0x Launch Kit' }, +]; + +const navItems: NavItem[] = [ + { id: 'why', url: '/next/why', text: 'Why 0x' }, + { id: 'products', url: '/next/0x-instant', text: 'Products' }, + { id: 'developers', url: '#', text: 'Developers' }, + { id: 'about', url: '/next/about/mission', text: 'About' }, + { id: 'blog', url: '#', text: 'Blog' }, ]; -export const Header: React.StatelessComponent<HeaderProps> = ({}) => ( - <StyledHeader> - <HeaderWrap> - <ReactRouterLink to="/next"> - <Logo/> - </ReactRouterLink> - - <ButtonWrap> - {_.map(links, (link, index) => ( - <Link - key={`hb-${index}`} - href={link.url} - isTransparent={true} - isNoBorder={true} - > - {link.text} - </Link> - ))} - </ButtonWrap> - - <Button href="#">Trade on 0x</Button> - </HeaderWrap> - </StyledHeader> -); - -const StyledHeader = Section.withComponent('header'); +export class Header extends React.Component<HeaderProps, HeaderState> { + constructor(props: HeaderProps) { + super(props); + this.state = { + isOpen: false, + }; + } + public render(): React.ReactNode { + return ( + <StyledHeader isOpen={this.state.isOpen}> + <HeaderWrap> + <ReactRouterLink to="/next"> + <Logo/> + </ReactRouterLink> + <Hamburger isOpen={this.state.isOpen} onClick={this._onMenuButtonClick.bind(this)}/> + <Nav> + <MobileProductLinksWrap> + <Paragraph isNoMargin={true} isMuted={0.5} size="small">Products</Paragraph> + {_.map(mobileProductLinks, (link, index) => ( + <StyledLink + key={`productlink-${index}`} + href={link.url} + isTransparent={true} + isNoBorder={true} + > + {link.text} + </StyledLink> + ))} + </MobileProductLinksWrap> + <StyledButtonWrap> + {_.map(navItems, (link, index) => this._getNavItem(link, index))} + </StyledButtonWrap> + </Nav> + <TradeButton href="#">Trade on 0x</TradeButton> + </HeaderWrap> + </StyledHeader> + ); + } + private _onMenuButtonClick(): void { + this.setState({ + isOpen: !this.state.isOpen, + }); + } + private _getNavItem(link: NavItem, index: number): React.ReactNode { + if (link.id === 'developers') { + return ( + <DevelopersDropDown + location={window.location} + /> + ); + } + + return ( + <StyledLink + key={`header-nav-item-${index}`} + href={link.url} + isTransparent={true} + isNoBorder={true} + > + {link.text} + </StyledLink> + ) + } +} + +const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>` + @media (max-width: 768px) { + overflow: hidden; + min-height: ${props => props.isOpen ? '385px' : '70px'}; + position: relative; + transition: min-height 0.25s ease-in-out; + :root & { + padding: 20px 20px 0 !important; + } + } +`; + const HeaderWrap = styled(Wrap)` justify-content: space-between; align-items: center; + + @media (max-width: 768px) { + padding-top: 0; + display: flex; + padding-bottom: 0; + } +`; + +const StyledButtonWrap = styled(ButtonWrap)` + display: flex; + @media (max-width: 768px) { + background-color: #022924; + display: flex; + flex-wrap: wrap; + padding: 20px 20px; + + a { + text-align: left; + padding-left: 0; + } + } + + button + button, + a + a, + a + button, + button + a { + margin-left: 0; + + @media (min-width: 768px) { + margin-left: 10px; + } + } +`; + +const MobileProductLinksWrap = styled(StyledButtonWrap)` + display: none; + + @media (max-width: 768px) { + display: block; + background-color: transparent; + flex-direction: column; + + a { + display: block; + width: 100%; + } + } +`; + +const StyledLink = styled(Link)` + width: 50%; + text-align: left; + @media (max-width: 768px) { + } + + @media (min-width: 768px) { + width: auto; + text-align: center; + } +`; + +const Nav = styled.div` + @media (max-width: 768px) { + background-color: ${colors.brandDark}; + position: absolute; + top: 0; + left: 0; + right: 0; + padding-top: 65px; + } + + @media (min-width: 768px) { + width: auto; + text-align: center; + } +`; + +const TradeButton = styled(Button)` + @media (max-width: 768px) { + display: none; + } `; |