aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/header.tsx2
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx13
2 files changed, 12 insertions, 3 deletions
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);