diff options
| author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-18 00:31:06 +0800 |
|---|---|---|
| committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-18 00:31:06 +0800 |
| commit | 312d864936a0f930a09dcb0739f0e498ea42feac (patch) | |
| tree | 0a2921c5dfa6f27a32133743349335b8b302e3a4 | |
| parent | 67caa377a461a38dd94dfdc32641c6db0d8e6eb5 (diff) | |
| download | dexon-sol-tools-312d864936a0f930a09dcb0739f0e498ea42feac.tar.gz dexon-sol-tools-312d864936a0f930a09dcb0739f0e498ea42feac.tar.zst dexon-sol-tools-312d864936a0f930a09dcb0739f0e498ea42feac.zip | |
Fixes mobile nav overflow on mobile
| -rw-r--r-- | packages/website/ts/@next/components/header.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 13 |
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); |