diff options
Diffstat (limited to 'packages/website/ts/@next/components/header.tsx')
| -rw-r--r-- | packages/website/ts/@next/components/header.tsx | 69 |
1 files changed, 40 insertions, 29 deletions
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index fde549642..544a7daf1 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'; @@ -66,39 +68,47 @@ const navItems: NavItemProps[] = [ ]; class HeaderBase extends React.Component<HeaderProps> { + public onUnpin = () => { + if (this.props.isNavToggled) { + this.props.toggleMobileNav(); + } + } + public render(): React.ReactNode { const { isNavToggled, toggleMobileNav, theme } = this.props; return ( - <StyledHeader> - <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="https://0x.org/portal" - > - Trade on 0x - </TradeButton> - </MediaQuery> - - <Hamburger isOpen={isNavToggled} onClick={toggleMobileNav} /> - <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} /> - </HeaderWrap> - </StyledHeader> + <Headroom onUnpin={this.onUnpin} downTolerance={4} upTolerance={10}> + <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 +136,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` |