Fixes mobile nav overflow on mobile

This commit is contained in:
Ezekiel Aquino
2018-12-17 17:31:06 +01:00
parent 67caa377a4
commit 312d864936
2 changed files with 12 additions and 3 deletions

View File

@@ -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 />

View File

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