diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-13 19:33:45 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-13 19:33:45 +0800 |
commit | b4b1d54e49ff3d6c146b257ddb918fca5ddb1329 (patch) | |
tree | 5fbc0d62b38bdd9c0c204dbd74ca633b6616545e /packages/website/ts/@next/components/header.tsx | |
parent | a852a4077d77753beb3f6413a1eae22274dd99de (diff) | |
download | dexon-0x-contracts-b4b1d54e49ff3d6c146b257ddb918fca5ddb1329.tar.gz dexon-0x-contracts-b4b1d54e49ff3d6c146b257ddb918fca5ddb1329.tar.zst dexon-0x-contracts-b4b1d54e49ff3d6c146b257ddb918fca5ddb1329.zip |
WIP refactor mobileNavMenu
Diffstat (limited to 'packages/website/ts/@next/components/header.tsx')
-rw-r--r-- | packages/website/ts/@next/components/header.tsx | 62 |
1 files changed, 27 insertions, 35 deletions
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 44686686f..d596d43ca 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -14,6 +14,8 @@ import { BREAKPOINTS, Section, Wrap } from 'ts/@next/components/layout'; import { Logo } from 'ts/@next/components/logo'; import { Paragraph } from 'ts/@next/components/text'; +import { MobileNav } from 'ts/@next/components/mobileNav'; + interface HeaderProps { isOpen: boolean; location?: Location; @@ -108,47 +110,32 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> { public render(): React.ReactNode { const { isOpen } = this.state; - const { theme } = this.props; + const { isNavToggled, toggleMobileNav, theme } = this.props; return ( <StyledHeader isOpen={isOpen}> - <HeaderWrap> - <ReactRouterLink to="/next"> - <Logo/> - </ReactRouterLink> - - <Hamburger isOpen={this.state.isOpen} onClick={this.onMenuButtonClick}/> - - <Nav> - <MobileProductLinksWrap> - {_.map(mobileProductLinks, (link, index) => ( - <Link - key={`productlink-${index}`} - href={link.url} - isTransparent={true} - isNoBorder={true} - > - {link.text} - </Link> - ))} - </MobileProductLinksWrap> + <HeaderWrap> + <ReactRouterLink to="/next"> + <Logo/> + </ReactRouterLink> <StyledButtonWrap> - {_.map(navItems, (link, index) => ( + {_.map(navItems, (link, index) => ( this.getNavItem(link, index) - ))} + ))} </StyledButtonWrap> - </Nav> - <TradeButton - bgColor={theme.headerButtonBg} - color="#ffffff" - href="https://0xproject.com/portal" - > - Trade on 0x - </TradeButton> - - </HeaderWrap> + <TradeButton + bgColor={theme.headerButtonBg} + color="#ffffff" + href="https://0xproject.com/portal" + > + Trade on 0x + </TradeButton> + + <Hamburger onClick={toggleMobileNav}/> + <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} /> + </HeaderWrap> </StyledHeader> ); } @@ -197,6 +184,11 @@ const StyledButtonWrap = styled.div` justify-content: space-between; @media (max-width: 800px) { + display: none; + } + +/* + @media (max-width: 800px) { background-color: #022924; display: flex; flex-wrap: wrap; @@ -210,7 +202,7 @@ const StyledButtonWrap = styled.div` a + a { margin-left: 0; } - } + } */ `; const MobileProductLinksWrap = styled(StyledButtonWrap)` @@ -292,7 +284,7 @@ const DropdownWrap = styled.div<DropdownWrapInterface>` const Nav = styled.div` @media (max-width: 800px) { - background-color: ${colors.brandDark}; + background-color: ${props => props.theme.bgColor}; position: absolute; top: 0; left: 0; |