diff options
| -rw-r--r-- | packages/react-shared/src/components/nested_sidebar_menu.tsx | 14 | ||||
| -rw-r--r-- | packages/website/ts/pages/documentation/home.tsx | 49 |
2 files changed, 20 insertions, 43 deletions
diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 2242349df..c871e77d4 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -94,7 +94,12 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N : link.title; return ( <div key={`menuItem-${finalMenuItemName}`}> - <Link to={link.to} type={LinkType.ReactScroll} containerId={constants.DOCS_CONTAINER_ID}> + <Link + to={link.to} + type={link.type} + shouldOpenInNewTab={link.shouldOpenInNewTab} + containerId={constants.DOCS_CONTAINER_ID} + > <MenuItem style={menuItemStyles} innerDivStyle={menuItemInnerDivStyles} @@ -131,7 +136,12 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N const name = `${menuItemName}-${link.title}`; return ( <li key={`menuSubsectionItem-${name}`}> - <Link to={link.to} type={LinkType.ReactScroll} containerId={constants.DOCS_CONTAINER_ID}> + <Link + to={link.to} + type={link.type} + shouldOpenInNewTab={link.shouldOpenInNewTab} + containerId={constants.DOCS_CONTAINER_ID} + > <MenuItem style={{ minHeight: 35 }} innerDivStyle={{ diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 72e507a7b..7c0bf433e 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -5,6 +5,7 @@ import { Link, LinkType, MarkdownLinkBlock, + NestedSidebarMenu, utils as sharedUtils, } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; @@ -425,6 +426,7 @@ export class Home extends React.Component<HomeProps, HomeState> { pkg => pkg.link, ), }; + console.log('sectionNameToLinks', sectionNameToLinks); return ( <Container className="flex items-center overflow-hidden" @@ -458,7 +460,12 @@ export class Home extends React.Component<HomeProps, HomeState> { onMouseLeave={this._onSidebarHover.bind(this, false)} onWheel={this._throttledSidebarScrolling} > - {this._renderMenu(sectionNameToLinks)} + <Container paddingLeft="22px" paddingRight="22px" paddingBottom="100px"> + <NestedSidebarMenu + sectionNameToLinks={sectionNameToLinks} + shouldReformatMenuItemNames={false} + /> + </Container> </div> </Container> <Container @@ -534,46 +541,6 @@ export class Home extends React.Component<HomeProps, HomeState> { </Container> ); } - private _renderMenu(sectionNameToLinks: ObjectMap<ALink[]>): React.ReactNode { - const navigation = _.map(sectionNameToLinks, (links: ALink[], sectionName: string) => { - // tslint:disable-next-line:no-unused-variable - return ( - <div key={`section-${sectionName}`} className="py1" style={{ color: colors.linkSectionGrey }}> - <div style={{ fontWeight: 'bold', fontSize: 15, letterSpacing: 0.5 }} className="py1"> - {sectionName.toUpperCase()} - </div> - {this._renderMenuItems(links)} - </div> - ); - }); - return ( - <Container paddingLeft="22px" paddingRight="22px" paddingBottom="100px"> - {navigation} - </Container> - ); - } - private _renderMenuItems(links: ALink[]): React.ReactNode { - const menuItems = _.map(links, link => { - return ( - <div key={`menuItem-${link.title}`}> - <Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab} type={link.type}> - <MenuItem - style={{ minHeight: 0 }} - innerDivStyle={{ - color: colors.grey800, - fontSize: 14, - lineHeight: 2, - padding: 0, - }} - > - {link.title} - </MenuItem> - </Link> - </div> - ); - }); - return menuItems; - } private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { return ( <div key={`category-${category}`}> |