Refactor a bunch of layouts into their own files

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>
+    );
+};