aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-18 00:31:06 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-18 00:31:06 +0800
commit312d864936a0f930a09dcb0739f0e498ea42feac (patch)
tree0a2921c5dfa6f27a32133743349335b8b302e3a4 /packages/website/ts
parent67caa377a461a38dd94dfdc32641c6db0d8e6eb5 (diff)
downloaddexon-sol-tools-312d864936a0f930a09dcb0739f0e498ea42feac.tar
dexon-sol-tools-312d864936a0f930a09dcb0739f0e498ea42feac.tar.gz
dexon-sol-tools-312d864936a0f930a09dcb0739f0e498ea42feac.tar.bz2
dexon-sol-tools-312d864936a0f930a09dcb0739f0e498ea42feac.tar.lz
dexon-sol-tools-312d864936a0f930a09dcb0739f0e498ea42feac.tar.xz
dexon-sol-tools-312d864936a0f930a09dcb0739f0e498ea42feac.tar.zst
dexon-sol-tools-312d864936a0f930a09dcb0739f0e498ea42feac.zip
Fixes mobile nav overflow on mobile
Diffstat (limited to 'packages/website/ts')
-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);