diff options
Diffstat (limited to 'packages/website/ts/components')
| -rw-r--r-- | packages/website/ts/components/dropdowns/developers_drop_down.tsx | 48 | ||||
| -rw-r--r-- | packages/website/ts/components/nested_sidebar_menu.tsx | 92 |
2 files changed, 115 insertions, 25 deletions
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index f5d21535a..6e85c1499 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -24,7 +24,7 @@ const gettingStartedKeyToLinkInfo2: ALink[] = [ to: `${WebsitePaths.Wiki}#Ethereum-Development`, }, { - title: Key.UseSharedLiquidity, + title: Key.UseNetworkedLiquidity, to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, ]; @@ -89,26 +89,22 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, ); } private _renderDropdownMenu(): React.ReactNode { + const sectionPadding = '28px'; const dropdownMenu = ( <Container> - <Container padding="1.75rem"> - {this._renderTitle('Getting started')} - <Container className="flex"> - <Container className="pr4 mr2"> - {this._renderLinkSection(gettingStartedKeyToLinkInfo1)} - </Container> - <Container>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</Container> + <Container className="flex" padding={sectionPadding}> + <Container paddingRight="45px"> + {this._renderLinkSection(gettingStartedKeyToLinkInfo1, 'Getting started')} </Container> + <Container>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</Container> </Container> <Container width="100%" height="1px" backgroundColor={colors.grey300} /> - <Container className="flex" padding="1.75rem"> - <Container className="pr4 mr2"> - <Container>{this._renderTitle('Popular docs')}</Container> - <Container>{this._renderLinkSection(popularDocsToLinkInfos)}</Container> + <Container className="flex" padding={sectionPadding}> + <Container paddingRight="62px"> + <Container>{this._renderLinkSection(popularDocsToLinkInfos, 'Popular docs')}</Container> </Container> <Container> - <Container>{this._renderTitle('Useful links')}</Container> - <Container>{this._renderLinkSection(usefulLinksToLinkInfo)}</Container> + <Container>{this._renderLinkSection(usefulLinksToLinkInfo, 'Useful links')}</Container> </Container> </Container> <Link to={WebsitePaths.Docs} fontColor={colors.lightBlueA700}> @@ -127,16 +123,7 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, ); return dropdownMenu; } - private _renderTitle(title: string): React.ReactNode { - return ( - <Container paddingBottom="12px"> - <Text letterSpacing={1} fontColor={colors.linkSectionGrey} fontSize="14px" fontWeight={600}> - {title.toUpperCase()} - </Text> - </Container> - ); - } - private _renderLinkSection(links: ALink[]): React.ReactNode { + private _renderLinkSection(links: ALink[], title: string = ''): React.ReactNode { const numLinks = links.length; let i = 0; const renderLinks = _.map(links, (link: ALink) => { @@ -159,6 +146,17 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, </Container> ); }); - return <Container>{renderLinks}</Container>; + return ( + <Container> + <Container height="33px"> + {!_.isEmpty(title) && ( + <Text letterSpacing={1} fontColor={colors.linkSectionGrey} fontSize="14px" fontWeight={600}> + {title.toUpperCase()} + </Text> + )} + </Container> + {renderLinks} + </Container> + ); } } diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx new file mode 100644 index 000000000..db7d55261 --- /dev/null +++ b/packages/website/ts/components/nested_sidebar_menu.tsx @@ -0,0 +1,92 @@ +import { ALink, colors, Link, utils as sharedUtils } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Button } from 'ts/components/ui/button'; +import { Text } from 'ts/components/ui/text'; + +export interface NestedSidebarMenuProps { + sectionNameToLinks: ObjectMap<ALink[]>; + sidebarHeader?: React.ReactNode; + shouldReformatMenuItemNames?: boolean; +} + +export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => { + const navigation = _.map(props.sectionNameToLinks, (links: ALink[], sectionName: string) => { + const finalSectionName = sharedUtils.convertCamelCaseToSpaces(sectionName); + const menuItems = _.map(links, (link, i) => { + const menuItemTitle = props.shouldReformatMenuItemNames + ? _.capitalize(sharedUtils.convertDashesToSpaces(link.title)) + : link.title; + const finalLink = { + ...link, + title: menuItemTitle, + }; + return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} />; + }); + // tslint:disable-next-line:no-unused-variable + return ( + <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}> + <Text fontSize="14px" letterSpacing="0.5" className="py1 pl1"> + {finalSectionName.toUpperCase()} + </Text> + {menuItems} + </div> + ); + }); + return ( + <div> + {props.sidebarHeader} + <div>{navigation}</div> + </div> + ); +}; + +export interface MenuItemProps { + link: ALink; +} + +export interface MenuItemState { + isActive: boolean; +} + +export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { + constructor(props: MenuItemProps) { + super(props); + const isActive = window.location.hash.slice(1) === props.link.to; + this.state = { + isActive, + }; + } + public render(): React.ReactNode { + const isActive = this.state.isActive; + return ( + <Link + to={this.props.link.to} + shouldOpenInNewTab={this.props.link.shouldOpenInNewTab} + onActivityChanged={this._onActivityChanged.bind(this)} + > + <Button + borderRadius="4px" + padding="0.4em 0.375em" + width="100%" + backgroundColor={isActive ? colors.lightLinkBlue : colors.grey100} + fontSize="14px" + textAlign="left" + > + <Text + fontWeight={isActive ? 'bold' : 'normal'} + fontColor={isActive ? colors.white : colors.grey800} + > + {this.props.link.title} + </Text> + </Button> + </Link> + ); + } + private _onActivityChanged(isActive: boolean): void { + this.setState({ + isActive, + }); + } +} |