From 312d864936a0f930a09dcb0739f0e498ea42feac Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Mon, 17 Dec 2018 17:31:06 +0100
Subject: Fixes mobile nav overflow on mobile

---
 packages/website/ts/@next/components/header.tsx   |  2 +-
 packages/website/ts/@next/components/siteWrap.tsx | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts/@next/components')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index d5894f65a..f6895d242 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -70,7 +70,7 @@ class HeaderBase extends React.Component<HeaderProps> {
         const { isNavToggled, toggleMobileNav, theme } = this.props;
 
         return (
-            <StyledHeader>
+            <StyledHeader isNavToggled={isNavToggled}>
                 <HeaderWrap>
                     <ReactRouterLink to={WebsitePaths.Home}>
                         <Logo />
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index c1513c647..6bbe73479 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -124,7 +124,7 @@ export class SiteWrap extends React.Component<Props, State> {
         const currentTheme = GLOBAL_THEMES[theme];
 
         return (
-            <>
+            <Container isNavToggled={isMobileNavOpen}>
                 <ThemeProvider theme={currentTheme}>
                     <>
                         <GlobalStyles />
@@ -141,11 +141,20 @@ 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);
-- 
cgit v1.2.3