aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-18 01:06:30 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-18 01:06:58 +0800
commit5e4defefb06ed886573abeb61ac5036836150f34 (patch)
tree407d9fcc9be8324b4bdcfaa84d43a82ff6ab6e5f /packages/website/ts/@next
parent8d76053210764d9337d2d477791badb40967e071 (diff)
downloaddexon-sol-tools-5e4defefb06ed886573abeb61ac5036836150f34.tar
dexon-sol-tools-5e4defefb06ed886573abeb61ac5036836150f34.tar.gz
dexon-sol-tools-5e4defefb06ed886573abeb61ac5036836150f34.tar.bz2
dexon-sol-tools-5e4defefb06ed886573abeb61ac5036836150f34.tar.lz
dexon-sol-tools-5e4defefb06ed886573abeb61ac5036836150f34.tar.xz
dexon-sol-tools-5e4defefb06ed886573abeb61ac5036836150f34.tar.zst
dexon-sol-tools-5e4defefb06ed886573abeb61ac5036836150f34.zip
Adds headroom instead for toggling nav visibility
Diffstat (limited to 'packages/website/ts/@next')
-rw-r--r--packages/website/ts/@next/components/header.tsx63
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx16
2 files changed, 36 insertions, 43 deletions
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index f6895d242..035eebe53 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -4,6 +4,8 @@ import MediaQuery from 'react-responsive';
import { NavLink as ReactRouterLink } from 'react-router-dom';
import styled, { withTheme } from 'styled-components';
+import Headroom from 'react-headroom';
+
import { Button } from 'ts/@next/components/button';
import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers';
import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
@@ -70,35 +72,37 @@ class HeaderBase extends React.Component<HeaderProps> {
const { isNavToggled, toggleMobileNav, theme } = this.props;
return (
- <StyledHeader isNavToggled={isNavToggled}>
- <HeaderWrap>
- <ReactRouterLink to={WebsitePaths.Home}>
- <Logo />
- </ReactRouterLink>
-
- <NavLinks>
- {_.map(navItems, (link, index) => (
- <NavItem
- key={`navlink-${index}`}
- link={link}
- />
- ))}
- </NavLinks>
-
- <MediaQuery minWidth={990}>
- <TradeButton
- bgColor={theme.headerButtonBg}
- color="#ffffff"
- href="/portal"
- >
- Trade on 0x
- </TradeButton>
- </MediaQuery>
-
- <Hamburger isOpen={isNavToggled} onClick={toggleMobileNav} />
- <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
- </HeaderWrap>
- </StyledHeader>
+ <Headroom>
+ <StyledHeader isNavToggled={isNavToggled}>
+ <HeaderWrap>
+ <ReactRouterLink to={WebsitePaths.Home}>
+ <Logo />
+ </ReactRouterLink>
+
+ <NavLinks>
+ {_.map(navItems, (link, index) => (
+ <NavItem
+ key={`navlink-${index}`}
+ link={link}
+ />
+ ))}
+ </NavLinks>
+
+ <MediaQuery minWidth={990}>
+ <TradeButton
+ bgColor={theme.headerButtonBg}
+ color="#ffffff"
+ href="/portal"
+ >
+ Trade on 0x
+ </TradeButton>
+ </MediaQuery>
+
+ <Hamburger isOpen={isNavToggled} onClick={toggleMobileNav} />
+ <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
+ </HeaderWrap>
+ </StyledHeader>
+ </Headroom>
);
}
}
@@ -126,6 +130,7 @@ const NavItem = (props: { link: NavItemProps; key: string }) => {
const StyledHeader = styled.header<HeaderProps>`
padding: 30px;
+ background-color: ${props => props.theme.bgColor};
`;
const LinkWrap = styled.li`
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index 6bbe73479..dae15110b 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -109,9 +109,6 @@ export class SiteWrap extends React.Component<Props, State> {
public toggleMobileNav = () => {
this.setState({
isMobileNavOpen: !this.state.isMobileNavOpen,
- }, () => {
- const overflow = this.state.isMobileNavOpen ? 'hidden' : 'auto';
- document.documentElement.style.overflowY = overflow;
});
}
@@ -124,7 +121,7 @@ export class SiteWrap extends React.Component<Props, State> {
const currentTheme = GLOBAL_THEMES[theme];
return (
- <Container isNavToggled={isMobileNavOpen}>
+ <>
<ThemeProvider theme={currentTheme}>
<>
<GlobalStyles />
@@ -141,20 +138,11 @@ 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);