diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/website/ts/@next/components/dropdowns/mock.tsx | 5 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/header.tsx | 109 |
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; } |