aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/website/ts/@next/components/dropdowns/mock.tsx5
-rw-r--r--packages/website/ts/@next/components/header.tsx109
2 files changed, 83 insertions, 31 deletions
diff --git a/packages/website/ts/@next/components/dropdowns/mock.tsx b/packages/website/ts/@next/components/dropdowns/mock.tsx
new file mode 100644
index 000000000..9ead533d6
--- /dev/null
+++ b/packages/website/ts/@next/components/dropdowns/mock.tsx
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export const Dropdown = () => (
+ <div>Dropdown menu placeholder</div>
+);
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 144eb5eb2..99e634e18 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -7,6 +7,7 @@ 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 { Dropdown } from 'ts/@next/components/dropdowns/mock';
import { Hamburger } from 'ts/@next/components/hamburger';
import { Section, Wrap } from 'ts/@next/components/layout';
import { Logo } from 'ts/@next/components/logo';
@@ -38,8 +39,18 @@ const mobileProductLinks = [
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: 'products',
+ url: '/next/0x-instant',
+ text: 'Products',
+ dropdownComponent: Dropdown,
+ },
+ {
+ id: 'developers',
+ url: '#',
+ text: 'Developers',
+ dropdownComponent: Dropdown,
+ },
{ id: 'about', url: '/next/about/mission', text: 'About' },
{ id: 'blog', url: '#', text: 'Blog' },
];
@@ -63,7 +74,6 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
<Nav>
<MobileProductLinksWrap>
- <Paragraph isNoMargin={true} isMuted={0.5} size="small">Products</Paragraph>
{_.map(mobileProductLinks, (link, index) => (
<StyledLink
key={`productlink-${index}`}
@@ -91,24 +101,27 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
});
}
private _getNavItem(link: NavItem, index: number): React.ReactNode {
- if (link.id === 'developers') {
- return (
- <DevelopersDropDown
- location={window.location}
- />
- );
- }
+ const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment;
+ const Subnav = link.dropdownComponent;
return (
- <StyledLink
- key={`header-nav-item-${index}`}
- href={link.url}
- isTransparent={true}
- isNoBorder={true}
- >
- {link.text}
- </StyledLink>
- )
+ <Wrapper>
+ <StyledLink
+ key={`nav-${index}`}
+ href={link.url}
+ isTransparent={true}
+ isNoBorder={true}
+ >
+ {link.text}
+ </StyledLink>
+
+ {link.dropdownComponent &&
+ <DropdownWrap>
+ <Subnav />
+ </DropdownWrap>
+ }
+ </Wrapper>
+ );
}
}
@@ -176,18 +189,55 @@ const MobileProductLinksWrap = styled(StyledButtonWrap)`
}
`;
-const StyledLink = styled(Link)`
- width: 50%;
- text-align: left;
- @media (max-width: 768px) {
+const LinkWrap = styled.div`
+ position: relative;
+
+ a {
+ display: block;
+ }
+
+ &:hover > div {
+ display: block;
+ visibility: visible;
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ transition: opacity 0.35s, transform 0.35s, visibility 0s;
}
+`;
+
+const DropdownWrap = styled.div`
+ width: 420px;
+ padding: 30px;
+ background-color: #ffffff;
+ color: #000000;
+ position: absolute;
+ top: 100%;
+ left: calc(50% - 210px);
+ visibility: hidden;
+ opacity: 0;
+ transform: translate3d(0, -10px, 0);
+ transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s;
- @media (min-width: 768px) {
- width: auto;
- text-align: center;
+ &:after {
+ bottom: 100%;
+ left: 50%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-color: rgba(255, 255, 255, 0);
+ border-bottom-color: #ffffff;
+ border-width: 10px;
+ margin-left: -10px;
}
`;
+const StyledLink = styled(Link)`
+
+`;
+
const Nav = styled.div`
@media (max-width: 768px) {
background-color: ${colors.brandDark};
@@ -197,14 +247,11 @@ const Nav = styled.div`
right: 0;
padding-top: 65px;
}
-
- @media (min-width: 768px) {
- width: auto;
- text-align: center;
- }
`;
const TradeButton = styled(Button)`
+ padding: 14px 22px;
+
@media (max-width: 768px) {
display: none;
}