From 5e4defefb06ed886573abeb61ac5036836150f34 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Mon, 17 Dec 2018 18:06:30 +0100 Subject: Adds headroom instead for toggling nav visibility --- packages/website/package.json | 2 +- packages/website/ts/@next/components/header.tsx | 63 ++++++++++++----------- packages/website/ts/@next/components/siteWrap.tsx | 16 +----- 3 files changed, 37 insertions(+), 44 deletions(-) (limited to 'packages/website') diff --git a/packages/website/package.json b/packages/website/package.json index 1387f45f4..bb97ea4e8 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -59,7 +59,7 @@ "react-document-title": "^2.0.3", "react-dom": "^16.4.2", "react-flickity-component": "^3.1.0", - "react-headroom": "^2.2.4", + "react-headroom": "2.2.2", "react-helmet": "^5.2.0", "react-lazyload": "^2.3.0", "react-loadable": "^5.5.0", 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 { const { isNavToggled, toggleMobileNav, theme } = this.props; return ( - - - - - - - - {_.map(navItems, (link, index) => ( - - ))} - - - - - Trade on 0x - - - - - - - + + + + + + + + + {_.map(navItems, (link, index) => ( + + ))} + + + + + Trade on 0x + + + + + + + + ); } } @@ -126,6 +130,7 @@ const NavItem = (props: { link: NavItemProps; key: string }) => { const StyledHeader = styled.header` 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 { 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 { const currentTheme = GLOBAL_THEMES[theme]; return ( - + <> <> @@ -141,20 +138,11 @@ export class SiteWrap extends React.Component {