1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
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,
});
}
}
|
