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

Fixed hamburger menu not appearing at 800px. Laid groundwork for docs header fixes / reusability tomorrow

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-25 00:20:52 +02:00
committed by fabioberger
parent 5e5ecdcf32
commit 1bdcb4f737
4 changed files with 41 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/website/ts/components/docs/header.tsx
View File

@@ -89,12 +89,14 @@ export const Header: React.FC<IHeaderProps> = ({ isNavToggled, toggleMobileNav }
))}
</NavLinks>
<MediaQuery minWidth={990}>
<MediaQuery minWidth={1200}>
<SearchInput isHome={false} />
</MediaQuery>
<Hamburger isOpen={isNavToggled} onClick={toggleMobileNav} />
<MobileNav navItems={navItems} isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
<MediaQuery maxWidth={1200}>
<Hamburger isOpen={isNavToggled} onClick={toggleMobileNav} />
<MobileNav navItems={navItems} isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
</MediaQuery>
</HeaderWrap>
</StyledHeader>
</Headroom>

4
packages/website/ts/components/hamburger.tsx
View File

@@ -29,10 +29,6 @@ const StyledHamburger = styled.button<Props>`
outline: none;
user-select: none;
@media (min-width: 800px) {
display: none;
}
span {
display: block;
background-color: ${props => props.theme.textColor};

6
packages/website/ts/components/header.tsx
View File

@@ -104,8 +104,10 @@ export const HeaderBase: React.FC<HeaderProps> = props => {
</TradeButton>
</MediaQuery>
<Hamburger isOpen={isNavToggled} onClick={toggleMobileNav} />
<MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
<MediaQuery maxWidth={800}>
<Hamburger isOpen={isNavToggled} onClick={toggleMobileNav} />
<MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
</MediaQuery>
</HeaderWrap>
</StyledHeader>
</Headroom>

67
packages/website/ts/components/mobileNav.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react';
import MediaQuery from 'react-responsive';
import styled from 'styled-components';
import { Link } from '@0x/react-shared';
@@ -21,42 +20,40 @@ export const MobileNav: React.FC<IMobileNavProps> = props => {
const { isToggled, toggleMobileNav } = props;
return (
<MediaQuery maxWidth={800}>
<Wrap isToggled={isToggled}>
<Section>
<h4>Products</h4>
<ul>
<li>
<Link to={WebsitePaths.Instant}>0x Instant</Link>
</li>
<li>
<Link to={WebsitePaths.LaunchKit}>0x Launch Kit</Link>
</li>
<li>
<Link to={WebsitePaths.AssetSwapperPage}>Swap Tokens</Link>
</li>
</ul>
</Section>
<Wrap isToggled={isToggled}>
<Section>
<h4>Products</h4>
<ul>
<li>
<Link to={WebsitePaths.Instant}>0x Instant</Link>
</li>
<li>
<Link to={WebsitePaths.LaunchKit}>0x Launch Kit</Link>
</li>
<li>
<Link to={WebsitePaths.AssetSwapperPage}>Swap Tokens</Link>
</li>
</ul>
</Section>
<Section isDark={true}>
<Grid as="ul" isFullWidth={true} isWrapped={true}>
<li>
<Link to={WebsitePaths.Why}>Why 0x</Link>
</li>
<li>
<Link to={WebsitePaths.AboutMission}>About</Link>
</li>
<li>
<Link to={constants.URL_BLOG} shouldOpenInNewTab={true}>
Blog
</Link>
</li>
</Grid>
</Section>
<Section isDark={true}>
<Grid as="ul" isFullWidth={true} isWrapped={true}>
<li>
<Link to={WebsitePaths.Why}>Why 0x</Link>
</li>
<li>
<Link to={WebsitePaths.AboutMission}>About</Link>
</li>
<li>
<Link to={constants.URL_BLOG} shouldOpenInNewTab={true}>
Blog
</Link>
</li>
</Grid>
</Section>
{isToggled && <Overlay onClick={toggleMobileNav} />}
</Wrap>
</MediaQuery>
{isToggled && <Overlay onClick={toggleMobileNav} />}
</Wrap>
);
};