chore: Add topBar menu items to mobile drawer
This commit is contained in:
Fabio Berger
parent
fdefa5952c
commit
18c31a3bc0
@ -5,7 +5,7 @@ import * as React from 'react';
|
||||
import { DocsLogo } from 'ts/components/documentation/docs_logo';
|
||||
import { Container } from 'ts/components/ui/container';
|
||||
import { Text } from 'ts/components/ui/text';
|
||||
import { Deco, Key, ScreenWidths, WebsitePaths } from 'ts/types';
|
||||
import { Deco, Key, ScreenWidths } from 'ts/types';
|
||||
import { constants } from 'ts/utils/constants';
|
||||
import { Translate } from 'ts/utils/translate';
|
||||
|
||||
@ -35,26 +35,6 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
|
||||
}
|
||||
}
|
||||
public render(): React.ReactNode {
|
||||
const menuItemLinks: ALink[] = [
|
||||
{
|
||||
title: this.props.translate.get(Key.Home, Deco.Cap),
|
||||
to: WebsitePaths.Home,
|
||||
},
|
||||
{
|
||||
title: this.props.translate.get(Key.Wiki, Deco.Cap),
|
||||
to: WebsitePaths.Wiki,
|
||||
},
|
||||
{
|
||||
title: this.props.translate.get(Key.Forum, Deco.Cap),
|
||||
to: constants.URL_FORUM,
|
||||
shouldOpenInNewTab: true,
|
||||
},
|
||||
{
|
||||
title: this.props.translate.get(Key.LiveChat, Deco.Cap),
|
||||
to: constants.URL_ZEROEX_CHAT,
|
||||
shouldOpenInNewTab: true,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<Container height={80}>
|
||||
<Container
|
||||
@ -63,7 +43,7 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
|
||||
>
|
||||
<Container className="sm-hide xs-hide">
|
||||
<Container className="flex items-center justify-between right" width="300px">
|
||||
{this._renderMenuItems(menuItemLinks)}
|
||||
{this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)}
|
||||
</Container>
|
||||
</Container>
|
||||
<Container className="lg-hide md-hide">
|
||||
@ -98,7 +78,7 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
|
||||
>
|
||||
<Container className="flex items-center" paddingLeft="4px">
|
||||
<Text fontSize="16px" fontColor={colors.lightLinkBlue} fontWeight="bold">
|
||||
{menuItemInfo.title}
|
||||
{this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)}
|
||||
</Text>
|
||||
</Container>
|
||||
</Link>
|
||||
|
||||
@ -16,6 +16,7 @@ export interface ButtonProps {
|
||||
type?: string;
|
||||
isDisabled?: boolean;
|
||||
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
||||
textAlign?: string;
|
||||
}
|
||||
|
||||
const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
|
||||
@ -35,6 +36,7 @@ export const Button = styled(PlainButton)`
|
||||
outline: none;
|
||||
font-family: ${props => props.fontFamily};
|
||||
width: ${props => props.width};
|
||||
text-align: ${props => props.textAlign};
|
||||
background-color: ${props => props.backgroundColor};
|
||||
border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
|
||||
&:hover {
|
||||
@ -59,6 +61,7 @@ Button.defaultProps = {
|
||||
fontFamily: 'Roboto',
|
||||
isDisabled: false,
|
||||
padding: '0.8em 2.2em',
|
||||
textAlign: 'center',
|
||||
};
|
||||
|
||||
Button.displayName = 'Button';
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import { ALink, NestedSidebarMenu } from '@0xproject/react-shared';
|
||||
import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared';
|
||||
import { ObjectMap } from '@0xproject/types';
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import { OverviewContent } from 'ts/components/documentation/overview_content';
|
||||
import { Button } from 'ts/components/ui/button';
|
||||
import { DevelopersPage } from 'ts/pages/documentation/developers_page';
|
||||
import { Dispatcher } from 'ts/redux/dispatcher';
|
||||
import { Categories, Deco, Key, Package, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types';
|
||||
import { constants } from 'ts/utils/constants';
|
||||
import { Translate } from 'ts/utils/translate';
|
||||
|
||||
const TUTORIALS: TutorialInfo[] = [
|
||||
@ -330,8 +332,13 @@ export class DocsHome extends React.Component<DocsHomeProps, DocsHomeState> {
|
||||
categoryToPackages={CATEGORY_TO_PACKAGES}
|
||||
/>
|
||||
);
|
||||
const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
|
||||
const sidebar = (
|
||||
<NestedSidebarMenu sectionNameToLinks={sectionNameToLinks} shouldReformatMenuItemNames={false} />
|
||||
<NestedSidebarMenu
|
||||
sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined}
|
||||
sectionNameToLinks={sectionNameToLinks}
|
||||
shouldReformatMenuItemNames={false}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<DevelopersPage
|
||||
@ -344,4 +351,27 @@ export class DocsHome extends React.Component<DocsHomeProps, DocsHomeState> {
|
||||
/>
|
||||
);
|
||||
}
|
||||
private _renderSidebarHeader(): React.ReactNode {
|
||||
const menuItems = _.map(constants.DEVELOPER_TOPBAR_LINKS, menuItemInfo => {
|
||||
return (
|
||||
<Link
|
||||
key={`menu-item-${menuItemInfo.title}`}
|
||||
to={menuItemInfo.to}
|
||||
shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab}
|
||||
>
|
||||
<Button
|
||||
borderRadius="4px"
|
||||
padding="0.4em 6px"
|
||||
width="100%"
|
||||
fontColor={colors.grey800}
|
||||
fontSize="14px"
|
||||
textAlign="left"
|
||||
>
|
||||
{this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)}
|
||||
</Button>
|
||||
</Link>
|
||||
);
|
||||
});
|
||||
return menuItems;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
import { ALink } from '@0xproject/react-shared';
|
||||
import { BigNumber } from '@0xproject/utils';
|
||||
import { Key, WebsitePaths } from 'ts/types';
|
||||
|
||||
const URL_FORUM = 'https://forum.0xproject.com';
|
||||
const URL_ZEROEX_CHAT = 'https://chat.0xproject.com';
|
||||
|
||||
export const constants = {
|
||||
DECIMAL_PLACES_ETH: 18,
|
||||
@ -74,7 +79,7 @@ export const constants = {
|
||||
URL_TESTNET_FAUCET: 'https://faucet.0xproject.com',
|
||||
URL_GITHUB_ORG: 'https://github.com/0xProject',
|
||||
URL_GITHUB_WIKI: 'https://github.com/0xProject/wiki',
|
||||
URL_FORUM: 'https://forum.0xproject.com',
|
||||
URL_FORUM,
|
||||
URL_METAMASK_CHROME_STORE: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',
|
||||
URL_METAMASK_FIREFOX_STORE: 'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/',
|
||||
URL_COINBASE_WALLET_IOS_APP_STORE: 'https://itunes.apple.com/us/app/coinbase-wallet/id1278383455?mt=8',
|
||||
@ -89,7 +94,7 @@ export const constants = {
|
||||
URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md',
|
||||
URL_TWITTER: 'https://twitter.com/0xproject',
|
||||
URL_WETH_IO: 'https://weth.io/',
|
||||
URL_ZEROEX_CHAT: 'https://chat.0xproject.com',
|
||||
URL_ZEROEX_CHAT,
|
||||
URL_WEB3_DOCS: 'https://github.com/ethereum/wiki/wiki/JavaScript-API',
|
||||
URL_WEB3_DECODED_LOG_ENTRY_EVENT:
|
||||
'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123',
|
||||
@ -97,4 +102,24 @@ export const constants = {
|
||||
URL_WEB3_PROVIDER_DOCS: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L150',
|
||||
URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js',
|
||||
URL_MISSION_AND_VALUES_BLOG_POST: 'https://blog.0xproject.com/the-0x-mission-and-values-181a58706f9f',
|
||||
DEVELOPER_TOPBAR_LINKS: [
|
||||
{
|
||||
title: Key.Home,
|
||||
to: WebsitePaths.Home,
|
||||
},
|
||||
{
|
||||
title: Key.Wiki,
|
||||
to: WebsitePaths.Wiki,
|
||||
},
|
||||
{
|
||||
title: Key.Forum,
|
||||
to: URL_FORUM,
|
||||
shouldOpenInNewTab: true,
|
||||
},
|
||||
{
|
||||
title: Key.LiveChat,
|
||||
to: URL_ZEROEX_CHAT,
|
||||
shouldOpenInNewTab: true,
|
||||
},
|
||||
] as ALink[],
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user