Add custom styling for drawer

1 files changed, 60 insertions, 0 deletions

diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx
new file mode 100644
index 000000000..45f3cbafb
--- /dev/null
+++ b/packages/website/ts/components/portal/drawer_menu.tsx
@@ -0,0 +1,60 @@
+import { colors, Styles } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { Menu } from 'ts/components/portal/menu';
+import { Identicon } from 'ts/components/ui/identicon';
+import { utils } from 'ts/utils/utils';
+
+const IDENTICON_DIAMETER = 45;
+const BORDER_RADIUS = '50%';
+
+const styles: Styles = {
+    root: {
+        backgroundColor: '#4A4A4A',
+        width: '100%',
+        height: '100%',
+    },
+    identicon: {
+        borderWidth: 3,
+        borderStyle: 'solid',
+        borderColor: colors.white,
+        borderRadius: BORDER_RADIUS,
+        MozBorderRadius: BORDER_RADIUS,
+        WebkitBorderRadius: BORDER_RADIUS,
+    },
+    userAddress: {
+        color: colors.white,
+    },
+};
+
+export interface DrawerMenuProps {
+    selectedPath?: string;
+    userAddress?: string;
+}
+export const DrawerMenu = (props: DrawerMenuProps) => {
+    return (
+        <div style={styles.root}>
+            <Header userAddress={props.userAddress} />
+            <Menu selectedPath={props.selectedPath} />
+        </div>
+    );
+};
+
+interface HeaderProps {
+    userAddress?: string;
+}
+const Header = (props: HeaderProps) => {
+    return (
+        <div className="flex flex-center py4">
+            <div className="flex flex-column mx-auto">
+                <Identicon address={props.userAddress} diameter={IDENTICON_DIAMETER} style={styles.identicon} />
+                {!_.isUndefined(props.userAddress) && (
+                    <div className="pt2" style={styles.userAddress}>
+                        {utils.getAddressBeginAndEnd(props.userAddress)}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};