diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/website/ts/@next/components/dropdowns/dropdown_products.tsx | 54 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/header.tsx | 5 |
2 files changed, 34 insertions, 25 deletions
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx index 366c00a1e..83d554f03 100644 --- a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx +++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx @@ -1,34 +1,40 @@ +import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; import {Heading, Paragraph} from 'ts/@next/components/text'; +const navData = [ + { + title: '0x Instant', + description: 'Simple crypto purchasing', + url: '#', + }, + { + title: '0x Launch kit', + description: 'Build on the 0x protocol', + url: '#', + }, + { + title: 'Extensions', + url: '#', + }, +]; + 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> + {_.map(navData, (item, index) => ( + <li> + <Heading color="#000000" isNoMargin={true} size="small"> + {item.title} + </Heading> - <li> - <Heading color="#000000" isNoMargin={true}> - Extensions - </Heading> - </li> + {item.description && + <Paragraph color="#5d5d5d" isNoMargin={true} size="small"> + {item.description} + </Paragraph> + } + </li> + ))} </List> ); diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 474d36086..4b5f8d346 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -92,9 +92,11 @@ export class Header extends React.Component<HeaderProps, HeaderState> { } public render(): React.ReactNode { + const { isOpen } = this.state; + return ( <Headroom> - <StyledHeader isOpen={this.state.isOpen}> + <StyledHeader isOpen={isOpen}> <HeaderWrap> <ReactRouterLink to="/next"> <Logo/> @@ -131,6 +133,7 @@ export class Header extends React.Component<HeaderProps, HeaderState> { const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>` @media (max-width: 768px) { min-height: ${props => props.isOpen ? '385px' : '70px'}; + overflow: ${props => !props.isOpen && 'hidden'}; position: relative; transition: min-height 0.25s ease-in-out; } |