aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/pages/shared/nested_sidebar_menu.tsx')
-rw-r--r--packages/website/ts/pages/shared/nested_sidebar_menu.tsx42
1 files changed, 37 insertions, 5 deletions
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
index 849c33504..fde6ef7ae 100644
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
@@ -11,12 +11,12 @@ import { utils } from 'ts/utils/utils';
interface NestedSidebarMenuProps {
topLevelMenu: { [topLevel: string]: string[] };
menuSubsectionsBySection: MenuSubsectionsBySection;
+ title: string;
shouldDisplaySectionHeaders?: boolean;
onMenuItemClick?: () => void;
selectedVersion?: string;
versions?: string[];
docPath?: string;
- isSectionHeaderClickable?: boolean;
}
interface NestedSidebarMenuState {}
@@ -29,7 +29,10 @@ const styles: Styles = {
minHeight: 48,
},
menuItemInnerDivWithHeaders: {
+ color: colors.grey800,
+ fontSize: 14,
lineHeight: 2,
+ padding: 0,
},
};
@@ -44,14 +47,14 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
if (this.props.shouldDisplaySectionHeaders) {
const id = utils.getIdFromName(sectionName);
return (
- <div key={`section-${sectionName}`} className="py1">
+ <div key={`section-${sectionName}`} className="py1" style={{ color: colors.grey800 }}>
<ScrollLink
to={id}
offset={-20}
duration={constants.DOCS_SCROLL_DURATION_MS}
containerId={constants.DOCS_CONTAINER_ID}
>
- <div style={{ color: colors.grey, cursor: 'pointer' }} className="pb1">
+ <div style={{ cursor: 'pointer', fontWeight: 'bold', fontSize: 15 }} className="py1">
{finalSectionName.toUpperCase()}
</div>
</ScrollLink>
@@ -64,6 +67,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
});
return (
<div>
+ {this._renderEmblem()}
{!_.isUndefined(this.props.versions) &&
!_.isUndefined(this.props.selectedVersion) &&
!_.isUndefined(this.props.docPath) && (
@@ -73,7 +77,35 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
docPath={this.props.docPath}
/>
)}
- {navigation}
+ <div className="pl1">{navigation}</div>
+ </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: 'rgb(202, 202, 202)', paddingBottom: 9, paddingLeft: 14, height: 17 }}
+ >
+ |
+ </div>
+ <div className="flex">
+ <div>
+ <img src="/images/book.png" width="31" />
+ </div>
+ <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1 }}>
+ {this.props.title}
+ </div>
+ </div>
</div>
);
}
@@ -132,7 +164,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
onTouchTap={this._onMenuItemClick.bind(this, name)}
style={{ minHeight: 35 }}
innerDivStyle={{
- paddingLeft: 36,
+ paddingLeft: 16,
fontSize: 14,
lineHeight: '35px',
}}