From b4b1d54e49ff3d6c146b257ddb918fca5ddb1329 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 13 Dec 2018 12:33:45 +0100 Subject: WIP refactor mobileNavMenu --- packages/website/ts/@next/components/hamburger.tsx | 2 +- packages/website/ts/@next/components/header.tsx | 62 +++++++++----------- packages/website/ts/@next/components/logo.tsx | 3 +- packages/website/ts/@next/components/mobileNav.tsx | 58 +++++++++++++++++++ packages/website/ts/@next/components/siteWrap.tsx | 67 +++++++++++++++------- 5 files changed, 133 insertions(+), 59 deletions(-) create mode 100644 packages/website/ts/@next/components/mobileNav.tsx (limited to 'packages') 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` 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 { public render(): React.ReactNode { const { isOpen } = this.state; - const { theme } = this.props; + const { isNavToggled, toggleMobileNav, theme } = this.props; return ( - - - - - - - - - - Trade on 0x - - - + + Trade on 0x + + + + + ); } @@ -196,6 +183,11 @@ const StyledButtonWrap = styled.div` align-items: center; justify-content: space-between; + @media (max-width: 800px) { + display: none; + } + +/* @media (max-width: 800px) { background-color: #022924; display: flex; @@ -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` 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 ( + +
+
    +
  • 0x instant
  • +
  • 0x Launch Kit
  • +
+
+ +
+ a +
+ + {isToggled && + + } +
+ ); + } +} + +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 => { - const { - children, - theme = 'dark', - } = props; - const currentTheme = GLOBAL_THEMES[theme]; +export class SiteWrap extends React.Component { + public state = { + isMobileNavOpen: false, + }; - return ( - <> - - <> - -
-
- {children} -
-