diff options
Diffstat (limited to 'packages')
4 files changed, 122 insertions, 38 deletions
diff --git a/packages/website/package.json b/packages/website/package.json index 0f70a4543..9e1d97508 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -57,6 +57,7 @@ "react-copy-to-clipboard": "^5.0.0", "react-document-title": "^2.0.3", "react-dom": "^16.4.2", + "react-headroom": "^2.2.4", "react-helmet": "^5.2.0", "react-lazyload": "^2.3.0", "react-loadable": "^5.5.0", diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx new file mode 100644 index 000000000..a9cfed538 --- /dev/null +++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import {Link} from 'react-router-dom'; +import {WrapGrid} from 'ts/@next/components/layout'; +import {Heading} from 'ts/@next/components/text'; + +export const DropdownDevelopers = () => ( + <> + <Wrap> + <Heading size="small" color="#5d5d5d"> + Getting Started + </Heading> + + <WrapGrid isCentered={false} isWrapped={true}> + <Link to="#">Build a relayer</Link> + <Link to="#">Develop on Ethereum</Link> + <Link to="#">Make & take orders</Link> + <Link to="#">Use networked liquidity</Link> + </WrapGrid> + </Wrap> + + <Wrap> + asdf + </Wrap> + </> +); + +const Wrap = styled.div` + padding: 15px 30px; +`; + +const StyledLink = styled(Link)` + width: calc(50% - 15px); + flex-shrink: 0; + color: #000000; +`; diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx new file mode 100644 index 000000000..366c00a1e --- /dev/null +++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import styled from 'styled-components'; +import {Heading, Paragraph} from 'ts/@next/components/text'; + +export const DropdownProducts = () => ( + <List> + <li> + <Heading color="#000000" isNoMargin={true}> + 0x Instant + </Heading> + + <Paragraph color="#5d5d5d" isNoMargin={true}> + Simple crypto purchasing + </Paragraph> + </li> + + <li> + <Heading color="#000000" isNoMargin={true}> + 0x Launch Kit + </Heading> + + <Paragraph color="#5d5d5d" isNoMargin={true}> + Build on the 0x protocol + </Paragraph> + </li> + + <li> + <Heading color="#000000" isNoMargin={true}> + Extensions + </Heading> + </li> + </List> +); + +const List = styled.ul` + li { + padding: 15px 30px; + } +`; diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 99e634e18..6444a1b97 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -1,5 +1,6 @@ import _ from 'lodash'; import * as React from 'react'; +import Headroom from 'react-headroom'; import { Link as ReactRouterLink } from 'react-router-dom'; import styled from 'styled-components'; @@ -7,6 +8,8 @@ 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 { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers'; +import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products'; import { Dropdown } from 'ts/@next/components/dropdowns/mock'; import { Hamburger } from 'ts/@next/components/hamburger'; import { Section, Wrap } from 'ts/@next/components/layout'; @@ -43,56 +46,56 @@ const navItems: NavItem[] = [ id: 'products', url: '/next/0x-instant', text: 'Products', - dropdownComponent: Dropdown, + dropdownComponent: DropdownProducts, }, { id: 'developers', url: '#', text: 'Developers', - dropdownComponent: Dropdown, + dropdownComponent: DropdownDevelopers, }, { id: 'about', url: '/next/about/mission', text: 'About' }, { id: 'blog', url: '#', text: 'Blog' }, ]; export class Header extends React.Component<HeaderProps, HeaderState> { - constructor(props: HeaderProps) { - super(props); - this.state = { - isOpen: false, - }; - } + public 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> - {_.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> + <Headroom> + <StyledHeader isOpen={this.state.isOpen}> + <HeaderWrap> + <ReactRouterLink to="/next"> + <Logo/> + </ReactRouterLink> + + <Hamburger isOpen={this.state.isOpen} onClick={this._onMenuButtonClick.bind(this)}/> + + <Nav> + <MobileProductLinksWrap> + {_.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> + </Headroom> ); } private _onMenuButtonClick(): void { @@ -135,6 +138,10 @@ const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>` padding: 20px 20px 0 !important; } } + + @media (min-width: 768px) { + background-color: ${props => props.theme.bgColor}; + } `; const HeaderWrap = styled(Wrap)` @@ -207,7 +214,7 @@ const LinkWrap = styled.div` const DropdownWrap = styled.div` width: 420px; - padding: 30px; + padding: 15px 0; background-color: #ffffff; color: #000000; position: absolute; |