diff options
Diffstat (limited to 'packages/website/ts/components/portal/drawer_menu.tsx')
-rw-r--r-- | packages/website/ts/components/portal/drawer_menu.tsx | 60 |
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> + ); +}; |