diff options
Diffstat (limited to 'packages/website/ts/components')
| -rw-r--r-- | packages/website/ts/components/documentation/docs_top_bar.tsx | 88 |
1 files changed, 25 insertions, 63 deletions
diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index 0806c8da2..a4bc3967b 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -20,13 +20,6 @@ interface DocsTopBarState { isDrawerOpen: boolean; } -interface MenuItemInfo { - iconUrl: string; - fontColor: string; - fontWeight?: string; - link: ALink; -} - export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState> { constructor(props: DocsTopBarProps) { super(props); @@ -42,56 +35,32 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState } } public render(): React.ReactNode { - const menuItemInfos: MenuItemInfo[] = [ + const menuItemLinks: ALink[] = [ + { + title: this.props.translate.get(Key.Home, Deco.Cap), + to: WebsitePaths.Home, + }, { - link: { - title: this.props.translate.get(Key.Wiki, Deco.Cap), - to: WebsitePaths.Wiki, - }, - iconUrl: '/images/developers/github_icon.svg', - fontColor: colors.linkSectionGrey, + title: this.props.translate.get(Key.Wiki, Deco.Cap), + to: WebsitePaths.Wiki, }, { - link: { - title: this.props.translate.get(Key.Forum, Deco.Cap), - to: constants.URL_FORUM, - shouldOpenInNewTab: true, - }, - iconUrl: '/images/developers/forum_icon.svg', - fontColor: colors.linkSectionGrey, + title: this.props.translate.get(Key.Forum, Deco.Cap), + to: constants.URL_FORUM, + shouldOpenInNewTab: true, }, { - link: { - title: this.props.translate.get(Key.LiveChat, Deco.Cap), - to: constants.URL_ZEROEX_CHAT, - shouldOpenInNewTab: true, - }, - iconUrl: '/images/developers/chat_icon.svg', - fontColor: colors.lightLinkBlue, - fontWeight: 'bold', + title: this.props.translate.get(Key.LiveChat, Deco.Cap), + to: constants.URL_ZEROEX_CHAT, + shouldOpenInNewTab: true, }, ]; return ( <Container height={80}> - <Container className="flex items-center lg-pt3 md-pt3 sm-pt1 relative" width="100%"> - <Container className="col col-2 sm-hide xs-hide"> - <Link - to={WebsitePaths.Home} - fontColor={colors.linkSectionGrey} - className="flex items-center text-decoration-none" - > - <i className="zmdi zmdi-chevron-left bold" style={{ fontSize: 16 }} /> - <Container paddingLeft="8px"> - <Text fontSize="16px" fontColor={colors.linkSectionGrey}> - 0xproject.com - </Text> - </Container> - </Link> - </Container> - <Container className="col col-4 md-hide sm-hide xs-hide" /> - <Container className="col col-6 md-pl4 md-ml4 sm-hide xs-hide"> + <Container className="flex items-center lg-pt3 md-pt3 sm-pt1 justify-end" width="100%"> + <Container className="sm-hide xs-hide"> <Container className="flex items-center justify-between right" width="300px"> - {this._renderMenuItems(menuItemInfos)} + {this._renderMenuItems(menuItemLinks)} </Container> </Container> <Container className="lg-hide md-hide"> @@ -116,25 +85,18 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState </Container> ); } - private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode { - const menuItems = _.map(menuItemInfos, menuItemInfo => { + private _renderMenuItems(menuItemLinks: ALink[]): React.ReactNode { + const menuItems = _.map(menuItemLinks, menuItemInfo => { return ( <Link - key={`menu-item-${menuItemInfo.link.title}`} - to={menuItemInfo.link.to} - shouldOpenInNewTab={menuItemInfo.link.shouldOpenInNewTab} + key={`menu-item-${menuItemInfo.title}`} + to={menuItemInfo.to} + shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab} > - <Container className="flex"> - <img src={menuItemInfo.iconUrl} width="18" /> - <Container className="flex items-center" paddingLeft="4px"> - <Text - fontSize="16px" - fontWeight={menuItemInfo.fontWeight || 'normal'} - fontColor={menuItemInfo.fontColor} - > - {menuItemInfo.link.title} - </Text> - </Container> + <Container className="flex items-center" paddingLeft="4px"> + <Text fontSize="16px" fontColor={colors.lightLinkBlue} fontWeight="bold"> + {menuItemInfo.title} + </Text> </Container> </Link> ); |