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

Make sidebar header configurable

Browse Source
This commit is contained in:
Fabio Berger
2018-03-06 20:38:45 +01:00
parent 01e505a5f4
commit f8b8a10b8f
6 changed files with 57 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,7 +13,7 @@ import { VersionDropDown } from './version_drop_down';
export interface NestedSidebarMenuProps {
topLevelMenu: { [topLevel: string]: string[] };
menuSubsectionsBySection: MenuSubsectionsBySection;
title: string;
sidebarHeader?: React.ReactNode;
shouldDisplaySectionHeaders?: boolean;
onMenuItemClick?: () => void;
selectedVersion?: string;
@@ -37,13 +37,6 @@ const styles: Styles = {
},
};
const titleToIcon: { [title: string]: string } = {
'0x.js': 'zeroExJs.png',
'0x Connect': 'connect.png',
'0x Smart Contracts': 'contracts.png',
Wiki: 'wiki.png',
};
export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> {
public static defaultProps: Partial<NestedSidebarMenuProps> = {
shouldDisplaySectionHeaders: true,
@@ -68,7 +61,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
});
return (
<div>
{this._renderEmblem()}
{this.props.sidebarHeader}
{!_.isUndefined(this.props.versions) &&
!_.isUndefined(this.props.selectedVersion) && (
<VersionDropDown selectedVersion={this.props.selectedVersion} versions={this.props.versions} />
@@ -77,31 +70,6 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
</div>
);
}
private _renderEmblem() {
return (
<div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}>
<div className="flex" style={{ fontSize: 25 }}>
<div className="robotoMono" style={{ fontWeight: 'bold' }}>
0x
</div>
<div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}>
docs
</div>
</div>
<div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}>
|
</div>
<div className="flex">
<div>
<img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="22" />
</div>
<div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}>
{this.props.title}
</div>
</div>
</div>
);
}
private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] {
const menuItemStyles = this.props.shouldDisplaySectionHeaders
? styles.menuItemWithHeaders