crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP refactor mobileNavMenu

Browse Source
This commit is contained in:
Ezekiel Aquino
2018-12-13 12:33:45 +01:00
parent a852a4077d
commit b4b1d54e49
5 changed files with 132 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/website/ts/@next/components/hamburger.tsx
View File

@@ -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;

60
packages/website/ts/@next/components/header.tsx
View File

@@ -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>
<TradeButton
bgColor={theme.headerButtonBg}
color="#ffffff"
href="https://0xproject.com/portal"
>
Trade on 0x
</TradeButton>
</HeaderWrap>
<Hamburger onClick={toggleMobileNav}/>
<MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
</HeaderWrap>
</StyledHeader>
);
}
@@ -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<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;

3
packages/website/ts/@next/components/logo.tsx
View File

@@ -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;
}

58
packages/website/ts/@next/components/mobileNav.tsx Normal file
View File

@@ -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};
`;

67
packages/website/ts/@next/components/siteWrap.tsx
View File

@@ -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'};
`;