aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_products.tsx54
-rw-r--r--packages/website/ts/@next/components/header.tsx5
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;
}