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

Use nestedSidebarMenu component for Dev home

Browse Source
This commit is contained in:
Fabio Berger
2018-10-03 17:03:05 +01:00
parent 72b1c60f39
commit 8d6bffa96c
2 changed files with 20 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/react-shared/src/components/nested_sidebar_menu.tsx
View File

@@ -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={{

49
packages/website/ts/pages/documentation/home.tsx
View File

@@ -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}`}>