aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/nested_sidebar_menu.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/nested_sidebar_menu.tsx')
-rw-r--r--packages/website/ts/components/nested_sidebar_menu.tsx101
1 files changed, 0 insertions, 101 deletions
diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx
deleted file mode 100644
index 56df880f3..000000000
--- a/packages/website/ts/components/nested_sidebar_menu.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { ALink, colors, Link, utils as sharedUtils } from '@0x/react-shared';
-import { ObjectMap } from '@0x/types';
-import * as _ from 'lodash';
-import * as React from 'react';
-import { Button } from 'ts/components/ui/button';
-import { Text } from 'ts/components/ui/text';
-import { ScreenWidths } from 'ts/types';
-
-export interface NestedSidebarMenuProps {
- sectionNameToLinks: ObjectMap<ALink[]>;
- sidebarHeader?: React.ReactNode;
- shouldReformatMenuItemNames?: boolean;
- screenWidth: ScreenWidths;
-}
-
-export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
- const navigation = _.map(props.sectionNameToLinks, (links: ALink[], sectionName: string) => {
- const finalSectionName = sharedUtils.convertCamelCaseToSpaces(sectionName);
- const menuItems = _.map(links, (link, i) => {
- const menuItemTitle = props.shouldReformatMenuItemNames
- ? _.capitalize(sharedUtils.convertDashesToSpaces(link.title))
- : link.title;
- const finalLink = {
- ...link,
- title: menuItemTitle,
- };
- return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} screenWidth={props.screenWidth} />;
- });
- // tslint:disable-next-line:no-unused-variable
- return (
- <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
- <Text fontSize="14px" letterSpacing="0.5" className="py1 pl1">
- {finalSectionName.toUpperCase()}
- </Text>
- {menuItems}
- </div>
- );
- });
- return (
- <div>
- {props.sidebarHeader}
- <div>{navigation}</div>
- </div>
- );
-};
-
-export interface MenuItemProps {
- link: ALink;
- screenWidth: ScreenWidths;
-}
-
-export interface MenuItemState {
- isActive: boolean;
-}
-
-export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
- constructor(props: MenuItemProps) {
- super(props);
- const isActive = window.location.hash.slice(1) === props.link.to;
- this.state = {
- isActive,
- };
- }
- public render(): React.ReactNode {
- const isActive = this.state.isActive;
- return (
- <Link
- to={this.props.link.to}
- shouldOpenInNewTab={this.props.link.shouldOpenInNewTab}
- onActivityChanged={this._onActivityChanged.bind(this)}
- >
- <Button
- borderRadius="4px"
- padding="0.4em 0.375em"
- width="100%"
- backgroundColor={
- isActive
- ? colors.lightLinkBlue
- : this.props.screenWidth === ScreenWidths.Sm
- ? 'white'
- : colors.grey100
- }
- fontSize="14px"
- textAlign="left"
- >
- <Text
- fontWeight={isActive ? 'bold' : 'normal'}
- fontColor={isActive ? colors.white : colors.grey800}
- >
- {this.props.link.title}
- </Text>
- </Button>
- </Link>
- );
- }
- private _onActivityChanged(isActive: boolean): void {
- this.setState({
- isActive,
- });
- }
-}