diff options
| author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-18 01:06:30 +0800 |
|---|---|---|
| committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-18 01:06:58 +0800 |
| commit | 5e4defefb06ed886573abeb61ac5036836150f34 (patch) | |
| tree | 407d9fcc9be8324b4bdcfaa84d43a82ff6ab6e5f /packages/website/ts/@next/components/header.tsx | |
| parent | 8d76053210764d9337d2d477791badb40967e071 (diff) | |
| download | dexon-0x-contracts-5e4defefb06ed886573abeb61ac5036836150f34.tar dexon-0x-contracts-5e4defefb06ed886573abeb61ac5036836150f34.tar.gz dexon-0x-contracts-5e4defefb06ed886573abeb61ac5036836150f34.tar.bz2 dexon-0x-contracts-5e4defefb06ed886573abeb61ac5036836150f34.tar.lz dexon-0x-contracts-5e4defefb06ed886573abeb61ac5036836150f34.tar.xz dexon-0x-contracts-5e4defefb06ed886573abeb61ac5036836150f34.tar.zst dexon-0x-contracts-5e4defefb06ed886573abeb61ac5036836150f34.zip | |
Adds headroom instead for toggling nav visibility
Diffstat (limited to 'packages/website/ts/@next/components/header.tsx')
| -rw-r--r-- | packages/website/ts/@next/components/header.tsx | 63 |
1 files changed, 34 insertions, 29 deletions
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index f6895d242..035eebe53 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -4,6 +4,8 @@ import MediaQuery from 'react-responsive'; import { NavLink as ReactRouterLink } from 'react-router-dom'; import styled, { withTheme } from 'styled-components'; +import Headroom from 'react-headroom'; + import { Button } from 'ts/@next/components/button'; import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers'; import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products'; @@ -70,35 +72,37 @@ class HeaderBase extends React.Component<HeaderProps> { const { isNavToggled, toggleMobileNav, theme } = this.props; return ( - <StyledHeader isNavToggled={isNavToggled}> - <HeaderWrap> - <ReactRouterLink to={WebsitePaths.Home}> - <Logo /> - </ReactRouterLink> - - <NavLinks> - {_.map(navItems, (link, index) => ( - <NavItem - key={`navlink-${index}`} - link={link} - /> - ))} - </NavLinks> - - <MediaQuery minWidth={990}> - <TradeButton - bgColor={theme.headerButtonBg} - color="#ffffff" - href="/portal" - > - Trade on 0x - </TradeButton> - </MediaQuery> - - <Hamburger isOpen={isNavToggled} onClick={toggleMobileNav} /> - <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} /> - </HeaderWrap> - </StyledHeader> + <Headroom> + <StyledHeader isNavToggled={isNavToggled}> + <HeaderWrap> + <ReactRouterLink to={WebsitePaths.Home}> + <Logo /> + </ReactRouterLink> + + <NavLinks> + {_.map(navItems, (link, index) => ( + <NavItem + key={`navlink-${index}`} + link={link} + /> + ))} + </NavLinks> + + <MediaQuery minWidth={990}> + <TradeButton + bgColor={theme.headerButtonBg} + color="#ffffff" + href="/portal" + > + Trade on 0x + </TradeButton> + </MediaQuery> + + <Hamburger isOpen={isNavToggled} onClick={toggleMobileNav} /> + <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} /> + </HeaderWrap> + </StyledHeader> + </Headroom> ); } } @@ -126,6 +130,7 @@ const NavItem = (props: { link: NavItemProps; key: string }) => { const StyledHeader = styled.header<HeaderProps>` padding: 30px; + background-color: ${props => props.theme.bgColor}; `; const LinkWrap = styled.li` |