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

Hides mobile nav on desktop, adds flexwrap maxwidth

Browse Source
This commit is contained in:
Ezekiel Aquino
2018-12-14 11:10:01 +01:00
parent e48887bc6f
commit 64c168eafc
2 changed files with 49 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
packages/website/ts/@next/components/mobileNav.tsx
View File

@@ -1,4 +1,5 @@
import * as React from 'react';
import MediaQuery from 'react-responsive';
import styled from 'styled-components';
import {Link} from 'react-router-dom';
@@ -15,53 +16,55 @@ export class MobileNav extends React.PureComponent<Props> {
const { isToggled, toggleMobileNav } = this.props;
return (
<Wrap isToggled={isToggled}>
<Section>
<h4>Products</h4>
<MediaQuery maxWidth={800}>
<Wrap isToggled={isToggled}>
<Section>
<h4>Products</h4>
<ul>
<li>
<Link to="#">
0x instant
</Link>
</li>
<li>
<Link to="#">
0x Launch Kit
</Link>
</li>
</ul>
</Section>
<ul>
<li>
<Link to="#">
0x instant
</Link>
</li>
<li>
<Link to="#">
0x Launch Kit
</Link>
</li>
</ul>
</Section>
<Section isDark={true}>
<Grid as="ul" isWrapped={true}>
<li>
<Link to="/next/why">
Why 0x
</Link>
</li>
<li>
<Link to="/next/about/mission">
About
</Link>
</li>
<li>
<Link to="/next">
Products
</Link>
</li>
<li>
<Link to="https://blog.0xproject.com/latest">
Blog
</Link>
</li>
</Grid>
</Section>
<Section isDark={true}>
<Grid as="ul" width="100%" isWrapped={true}>
<li>
<Link to="/next/why">
Why 0x
</Link>
</li>
<li>
<Link to="/next/about/mission">
About
</Link>
</li>
<li>
<Link to="/next">
Products
</Link>
</li>
<li>
<Link to="https://blog.0xproject.com/latest">
Blog
</Link>
</li>
</Grid>
</Section>
{isToggled &&
<Overlay onClick={toggleMobileNav} />
}
</Wrap>
{isToggled &&
<Overlay onClick={toggleMobileNav} />
}
</Wrap>
</MediaQuery>
);
}
}

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

@@ -69,6 +69,8 @@ export const Column = styled.div<ColumnProps>`
`;
export const FlexWrap = styled.div<FlexProps>`
max-width: 1500px;
margin: 0 auto;
padding: ${props => props.padding};
@media (min-width: ${props => props.flexBreakpoint || '768px'}) {