aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/pages')
-rw-r--r--packages/website/ts/pages/documentation/docs_home.tsx34
1 files changed, 32 insertions, 2 deletions
diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx
index 1059bb844..359f6b7e9 100644
--- a/packages/website/ts/pages/documentation/docs_home.tsx
+++ b/packages/website/ts/pages/documentation/docs_home.tsx
@@ -1,11 +1,13 @@
-import { ALink, NestedSidebarMenu } from '@0xproject/react-shared';
+import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared';
import { ObjectMap } from '@0xproject/types';
import * as _ from 'lodash';
import * as React from 'react';
import { OverviewContent } from 'ts/components/documentation/overview_content';
+import { Button } from 'ts/components/ui/button';
import { DevelopersPage } from 'ts/pages/documentation/developers_page';
import { Dispatcher } from 'ts/redux/dispatcher';
import { Categories, Deco, Key, Package, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
const TUTORIALS: TutorialInfo[] = [
@@ -330,8 +332,13 @@ export class DocsHome extends React.Component<DocsHomeProps, DocsHomeState> {
categoryToPackages={CATEGORY_TO_PACKAGES}
/>
);
+ const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
const sidebar = (
- <NestedSidebarMenu sectionNameToLinks={sectionNameToLinks} shouldReformatMenuItemNames={false} />
+ <NestedSidebarMenu
+ sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined}
+ sectionNameToLinks={sectionNameToLinks}
+ shouldReformatMenuItemNames={false}
+ />
);
return (
<DevelopersPage
@@ -344,4 +351,27 @@ export class DocsHome extends React.Component<DocsHomeProps, DocsHomeState> {
/>
);
}
+ private _renderSidebarHeader(): React.ReactNode {
+ const menuItems = _.map(constants.DEVELOPER_TOPBAR_LINKS, menuItemInfo => {
+ return (
+ <Link
+ key={`menu-item-${menuItemInfo.title}`}
+ to={menuItemInfo.to}
+ shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab}
+ >
+ <Button
+ borderRadius="4px"
+ padding="0.4em 6px"
+ width="100%"
+ fontColor={colors.grey800}
+ fontSize="14px"
+ textAlign="left"
+ >
+ {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)}
+ </Button>
+ </Link>
+ );
+ });
+ return menuItems;
+ }
}