aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-11 03:02:28 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-11 03:02:48 +0800
commite18be3160e5d35f478157d525e8ec9f91d06fe38 (patch)
tree710badf1f77eca1b43d20a08b655fad849959050 /packages/website/ts/@next/components
parent6ef5f28f81c9bf2908bbf6d4e1e1a0b7e926b92f (diff)
downloaddexon-sol-tools-e18be3160e5d35f478157d525e8ec9f91d06fe38.tar
dexon-sol-tools-e18be3160e5d35f478157d525e8ec9f91d06fe38.tar.gz
dexon-sol-tools-e18be3160e5d35f478157d525e8ec9f91d06fe38.tar.bz2
dexon-sol-tools-e18be3160e5d35f478157d525e8ec9f91d06fe38.tar.lz
dexon-sol-tools-e18be3160e5d35f478157d525e8ec9f91d06fe38.tar.xz
dexon-sol-tools-e18be3160e5d35f478157d525e8ec9f91d06fe38.tar.zst
dexon-sol-tools-e18be3160e5d35f478157d525e8ec9f91d06fe38.zip
WIP dropdown header
Diffstat (limited to 'packages/website/ts/@next/components')
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx37
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_products.tsx39
-rw-r--r--packages/website/ts/@next/components/header.tsx83
3 files changed, 121 insertions, 38 deletions
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;