Fixes mobile nav overflow on mobile
This commit is contained in:
@@ -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 />
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user