diff options
author | Fabio Berger <me@fabioberger.com> | 2018-11-11 23:48:31 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-11-11 23:48:31 +0800 |
commit | 1ec8a4115f386c45b12bdf0b6ebdcabb1a1c5bb7 (patch) | |
tree | 32ee653a39cd70ed78bfec58482cce1bbfa21265 /packages/website/ts/components/nested_sidebar_menu.tsx | |
parent | 753b33aec5a12a30f08701aa04b6ec67e7f590de (diff) | |
download | dexon-0x-contracts-1ec8a4115f386c45b12bdf0b6ebdcabb1a1c5bb7.tar dexon-0x-contracts-1ec8a4115f386c45b12bdf0b6ebdcabb1a1c5bb7.tar.gz dexon-0x-contracts-1ec8a4115f386c45b12bdf0b6ebdcabb1a1c5bb7.tar.bz2 dexon-0x-contracts-1ec8a4115f386c45b12bdf0b6ebdcabb1a1c5bb7.tar.lz dexon-0x-contracts-1ec8a4115f386c45b12bdf0b6ebdcabb1a1c5bb7.tar.xz dexon-0x-contracts-1ec8a4115f386c45b12bdf0b6ebdcabb1a1c5bb7.tar.zst dexon-0x-contracts-1ec8a4115f386c45b12bdf0b6ebdcabb1a1c5bb7.zip |
Fix menuItem background colors depending on the context
Diffstat (limited to 'packages/website/ts/components/nested_sidebar_menu.tsx')
-rw-r--r-- | packages/website/ts/components/nested_sidebar_menu.tsx | 13 |
1 files changed, 11 insertions, 2 deletions
diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx index 552839fb7..4d4bc4617 100644 --- a/packages/website/ts/components/nested_sidebar_menu.tsx +++ b/packages/website/ts/components/nested_sidebar_menu.tsx @@ -4,11 +4,13 @@ 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) => { @@ -22,7 +24,7 @@ export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => { ...link, title: menuItemTitle, }; - return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} />; + return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} screenWidth={props.screenWidth} />; }); // tslint:disable-next-line:no-unused-variable return ( @@ -44,6 +46,7 @@ export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => { export interface MenuItemProps { link: ALink; + screenWidth: ScreenWidths; } export interface MenuItemState { @@ -70,7 +73,13 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { borderRadius="4px" padding="0.4em 0.375em" width="100%" - backgroundColor={isActive ? colors.lightLinkBlue : 'transparent'} + backgroundColor={ + isActive + ? colors.lightLinkBlue + : this.props.screenWidth === ScreenWidths.Sm + ? 'white' + : colors.grey100 + } fontSize="14px" textAlign="left" > |