diff options
| -rw-r--r-- | packages/website/package.json | 2 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/header.tsx | 63 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 16 |
3 files changed, 37 insertions, 44 deletions
diff --git a/packages/website/package.json b/packages/website/package.json index 1387f45f4..bb97ea4e8 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -59,7 +59,7 @@ "react-document-title": "^2.0.3", "react-dom": "^16.4.2", "react-flickity-component": "^3.1.0", - "react-headroom": "^2.2.4", + "react-headroom": "2.2.2", "react-helmet": "^5.2.0", "react-lazyload": "^2.3.0", "react-loadable": "^5.5.0", 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` diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index 6bbe73479..dae15110b 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -109,9 +109,6 @@ export class SiteWrap extends React.Component<Props, State> { public toggleMobileNav = () => { this.setState({ isMobileNavOpen: !this.state.isMobileNavOpen, - }, () => { - const overflow = this.state.isMobileNavOpen ? 'hidden' : 'auto'; - document.documentElement.style.overflowY = overflow; }); } @@ -124,7 +121,7 @@ export class SiteWrap extends React.Component<Props, State> { const currentTheme = GLOBAL_THEMES[theme]; return ( - <Container isNavToggled={isMobileNavOpen}> + <> <ThemeProvider theme={currentTheme}> <> <GlobalStyles /> @@ -141,20 +138,11 @@ export class SiteWrap extends React.Component<Props, State> { <Footer/> </> </ThemeProvider> - </Container> + </> ); } } -const Container = styled.div` - width: 100vw; - height: 100%; - position: fixed; - overflow-x: hidden; - overflow-y: ${props => props.isNavToggled ? 'hidden' : 'auto'}; - -webkit-overflow-scrolling: touch; -`; - const Main = styled.main<MainProps>` transition: transform 0.5s, opacity 0.5s; transform: translate3d(0, ${props => props.isNavToggled ? '357px' : 0}, 0); |