aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/@next/components/hamburger.tsx2
-rw-r--r--packages/website/ts/@next/components/header.tsx62
-rw-r--r--packages/website/ts/@next/components/logo.tsx3
-rw-r--r--packages/website/ts/@next/components/mobileNav.tsx58
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx67
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'};
+`;
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-10 12:31:22 +0800