Adds headroom instead for toggling nav visibility

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);