diff options
Diffstat (limited to 'packages/website/ts/@next')
| -rw-r--r-- | packages/website/ts/@next/components/hamburger.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/header.tsx | 62 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/logo.tsx | 3 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/mobileNav.tsx | 58 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 67 |
5 files changed, 133 insertions, 59 deletions
diff --git a/packages/website/ts/@next/components/hamburger.tsx b/packages/website/ts/@next/components/hamburger.tsx index 37aabcd10..97c9ba26d 100644 --- a/packages/website/ts/@next/components/hamburger.tsx +++ b/packages/website/ts/@next/components/hamburger.tsx @@ -22,7 +22,7 @@ const StyledHamburger = styled.button<Props>` width: 22px; height: 16px; position: relative; - z-index: 2; + z-index: 9999; padding: 0; outline: none; user-select: none; diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 44686686f..d596d43ca 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -14,6 +14,8 @@ import { BREAKPOINTS, Section, Wrap } from 'ts/@next/components/layout'; import { Logo } from 'ts/@next/components/logo'; import { Paragraph } from 'ts/@next/components/text'; +import { MobileNav } from 'ts/@next/components/mobileNav'; + interface HeaderProps { isOpen: boolean; location?: Location; @@ -108,47 +110,32 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> { public render(): React.ReactNode { const { isOpen } = this.state; - const { theme } = this.props; + const { isNavToggled, toggleMobileNav, theme } = this.props; return ( <StyledHeader isOpen={isOpen}> - <HeaderWrap> - <ReactRouterLink to="/next"> - <Logo/> - </ReactRouterLink> - - <Hamburger isOpen={this.state.isOpen} onClick={this.onMenuButtonClick}/> - - <Nav> - <MobileProductLinksWrap> - {_.map(mobileProductLinks, (link, index) => ( - <Link - key={`productlink-${index}`} - href={link.url} - isTransparent={true} - isNoBorder={true} - > - {link.text} - </Link> - ))} - </MobileProductLinksWrap> + <HeaderWrap> + <ReactRouterLink to="/next"> + <Logo/> + </ReactRouterLink> <StyledButtonWrap> - {_.map(navItems, (link, index) => ( + {_.map(navItems, (link, index) => ( this.getNavItem(link, index) - ))} + ))} </StyledButtonWrap> - </Nav> - <TradeButton - bgColor={theme.headerButtonBg} - color="#ffffff" - href="https://0xproject.com/portal" - > - Trade on 0x - </TradeButton> - - </HeaderWrap> + <TradeButton + bgColor={theme.headerButtonBg} + color="#ffffff" + href="https://0xproject.com/portal" + > + Trade on 0x + </TradeButton> + + <Hamburger onClick={toggleMobileNav}/> + <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} /> + </HeaderWrap> </StyledHeader> ); } @@ -197,6 +184,11 @@ const StyledButtonWrap = styled.div` justify-content: space-between; @media (max-width: 800px) { + display: none; + } + +/* + @media (max-width: 800px) { background-color: #022924; display: flex; flex-wrap: wrap; @@ -210,7 +202,7 @@ const StyledButtonWrap = styled.div` a + a { margin-left: 0; } - } + } */ `; const MobileProductLinksWrap = styled(StyledButtonWrap)` @@ -292,7 +284,7 @@ const DropdownWrap = styled.div<DropdownWrapInterface>` const Nav = styled.div` @media (max-width: 800px) { - background-color: ${colors.brandDark}; + background-color: ${props => props.theme.bgColor}; position: absolute; top: 0; left: 0; diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx index 20cab0828..06742664e 100644 --- a/packages/website/ts/@next/components/logo.tsx +++ b/packages/website/ts/@next/components/logo.tsx @@ -15,10 +15,9 @@ interface LogoInterface { const StyledLogo = styled.div` text-align: left; position: relative; + z-index: 9999; @media (max-width: 800px) { - z-index: 2; - svg { width: 60px; } diff --git a/packages/website/ts/@next/components/mobileNav.tsx b/packages/website/ts/@next/components/mobileNav.tsx new file mode 100644 index 000000000..f6f32ee7a --- /dev/null +++ b/packages/website/ts/@next/components/mobileNav.tsx @@ -0,0 +1,58 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +export class MobileNav extends React.PureComponent { + public render(): React.Node { + const { isToggled, toggleMobileNav } = this.props; + + return ( + <Wrap isToggled={isToggled}> + <Section> + <ul> + <li>0x instant</li> + <li>0x Launch Kit</li> + </ul> + </Section> + + <Section isDark={true}> + a + </Section> + + {isToggled && + <Overlay onClick={toggleMobileNav} /> + } + </Wrap> + ); + } +} + +const Wrap = styled.nav` + width: 100%; + height: 357px; + background-color: ${props => props.theme.mobileNavBgUpper}; + color: ${props => props.theme.mobileNavColor}; + transition: transform 0.5s; + transform: translate3d(0, ${props => props.isToggled ? 0 : '-100%'}, 0); + position: fixed; + display: flex; + flex-direction: column; + justify-content: flex-end; + z-index: 999; + top: 0; + left: 0; +`; + +const Overlay = styled.div` + position: absolute; + width: 100vw; + height: 100vh; + top: 100%; + background: transparent; + cursor: pointer; +`; + +const Section = styled.div` + width: 100%; + padding: 30px; + background-color: ${props => props.isDark && props.theme.mobileNavBgLower}; +`; diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index 48efb6e6b..7bb9d27ab 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -31,6 +31,9 @@ const GLOBAL_THEMES: ThemeInterface = { textColor: '#FFFFFF', paragraphColor: '#777777', linkColor: colors.brandLight, + mobileNavBgUpper: '#003831', + mobileNavBgLower: '#022924', + mobileNavColor: '#FFFFFF', dropdownBg: '#111A19', dropdownButtonBg: '#003831', dropdownColor: '#FFFFFF', @@ -65,25 +68,47 @@ const GLOBAL_THEMES: ThemeInterface = { }, }; -export const SiteWrap: React.StatelessComponent<Props> = props => { - const { - children, - theme = 'dark', - } = props; - const currentTheme = GLOBAL_THEMES[theme]; +export class SiteWrap extends React.Component { + public state = { + isMobileNavOpen: false, + }; - return ( - <> - <ThemeProvider theme={currentTheme}> - <> - <GlobalStyles /> - <Header /> - <main> - {children} - </main> - <Footer/> - </> - </ThemeProvider> - </> - ); -}; + public toggleMobileNav = () => { + this.setState({ + isMobileNavOpen: !this.state.isMobileNavOpen, + }, () => { + const overflow = this.state.isMobileNavOpen ? 'hidden' : 'auto'; + document.documentElement.style.overflowY = overflow; + }); + } + + public render(): React.Node { + const { + children, + theme = 'dark', + } = this.props; + const { isMobileNavOpen } = this.state; + const currentTheme = GLOBAL_THEMES[theme]; + + return ( + <> + <ThemeProvider theme={currentTheme}> + <> + <GlobalStyles /> + <Header isNavToggled={isMobileNavOpen} toggleMobileNav={this.toggleMobileNav} /> + <Main isNavToggled={isMobileNavOpen}> + {children} + </Main> + <Footer/> + </> + </ThemeProvider> + </> + ); + } +} + +const Main = styled.main` + transition: transform 0.5s, opacity 0.5s; + transform: translate3d(0, ${props => props.isNavToggled ? '357px' : 0}, 0); + opacity: ${props => props.isNavToggled && '0.5'}; +`; |