diff options
Diffstat (limited to 'packages/website/ts/components/portal/menu.tsx')
-rw-r--r-- | packages/website/ts/components/portal/menu.tsx | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx new file mode 100644 index 000000000..9014d8d42 --- /dev/null +++ b/packages/website/ts/components/portal/menu.tsx @@ -0,0 +1,88 @@ +import { colors, Styles } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { MenuItem } from 'ts/components/ui/menu_item'; +import { Environments, WebsitePaths } from 'ts/types'; +import { configs } from 'ts/utils/configs'; + +export interface MenuProps { + selectedPath?: string; +} + +interface MenuItemEntry { + to: string; + labelText: string; + iconName: string; +} + +const menuItemEntries: MenuItemEntry[] = [ + { + to: `${WebsitePaths.Portal}/account`, + labelText: 'Account overview', + iconName: 'zmdi-balance-wallet', + }, + { + to: `${WebsitePaths.Portal}/trades`, + labelText: 'Trade history', + iconName: 'zmdi-format-list-bulleted', + }, + { + to: `${WebsitePaths.Portal}/weth`, + labelText: 'Wrapped ETH', + iconName: 'zmdi-circle-o', + }, + { + to: `${WebsitePaths.Portal}/direct`, + labelText: 'Trade direct', + iconName: 'zmdi-swap', + }, +]; + +const DEFAULT_LABEL_COLOR = colors.darkerGrey; +const DEFAULT_ICON_COLOR = colors.darkerGrey; +const SELECTED_ICON_COLOR = colors.yellow900; + +const LEFT_PADDING = 185; + +export const Menu: React.StatelessComponent<MenuProps> = (props: MenuProps) => { + return ( + <div style={{ paddingLeft: LEFT_PADDING }}> + {_.map(menuItemEntries, entry => { + const selected = entry.to === props.selectedPath; + return ( + <MenuItem key={entry.to} className="py2" to={entry.to}> + <MenuItemLabel title={entry.labelText} iconName={entry.iconName} selected={selected} /> + </MenuItem> + ); + })} + </div> + ); +}; + +interface MenuItemLabelProps { + title: string; + iconName: string; + selected: boolean; +} +const MenuItemLabel: React.StatelessComponent<MenuItemLabelProps> = (props: MenuItemLabelProps) => { + const styles: Styles = { + iconStyle: { + color: props.selected ? SELECTED_ICON_COLOR : DEFAULT_ICON_COLOR, + fontSize: 20, + }, + textStyle: { + color: DEFAULT_LABEL_COLOR, + fontWeight: props.selected ? 'bold' : 'normal', + }, + }; + return ( + <div className="flex"> + <div className="pr1"> + <i style={styles.iconStyle} className={`zmdi ${props.iconName}`} /> + </div> + <div className="pl1" style={styles.textStyle}> + {props.title} + </div> + </div> + ); +}; |