Adds headroom instead for toggling nav visibility

1 files changed, 2 insertions, 14 deletions

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