From f35156517d8fe63935f34cec880b144aae3f55aa Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 15:35:56 +0100 Subject: chore: get menu onHover darken back --- .../src/components/nested_sidebar_menu.tsx | 64 +++++++++------------- 1 file changed, 27 insertions(+), 37 deletions(-) (limited to 'packages') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 87622310a..70062182b 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -12,7 +12,6 @@ import { Link } from './link'; export interface NestedSidebarMenuProps { sectionNameToLinks: ObjectMap; sidebarHeader?: React.ReactNode; - shouldDisplaySectionHeaders?: boolean; shouldReformatMenuItemNames?: boolean; parentName?: string; } @@ -22,13 +21,12 @@ export interface NestedSidebarMenuState { } const styles: Styles = { - menuItemWithHeaders: { + menuItem: { minHeight: 0, + paddingLeft: 8, + borderRadius: 6, }, - menuItemWithoutHeaders: { - minHeight: 48, - }, - menuItemInnerDivWithHeaders: { + menuItemInnerDiv: { color: colors.grey800, fontSize: 14, lineHeight: 2, @@ -41,7 +39,6 @@ const styles: Styles = { export class NestedSidebarMenu extends React.Component { public static defaultProps: Partial = { - shouldDisplaySectionHeaders: true, shouldReformatMenuItemNames: true, parentName: 'default', }; @@ -68,19 +65,15 @@ export class NestedSidebarMenu extends React.Component { const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); - if (this.props.shouldDisplaySectionHeaders) { - // tslint:disable-next-line:no-unused-variable - return ( -
-
- {finalSectionName.toUpperCase()} -
- {this._renderMenuItems(links)} + // tslint:disable-next-line:no-unused-variable + return ( +
+
+ {finalSectionName.toUpperCase()}
- ); - } else { - return
{this._renderMenuItems(links)}
; - } + {this._renderMenuItems(links)} +
+ ); }); return (
@@ -91,31 +84,28 @@ export class NestedSidebarMenu extends React.Component { - const isScrolledTo = link.to === scrolledToId; const finalMenuItemName = this.props.shouldReformatMenuItemNames ? utils.convertDashesToSpaces(link.title) : link.title; + let menuItemStyle = styles.menuItem; + let menuItemInnerDivStyle = styles.menuItemInnerDiv; + const isScrolledTo = link.to === scrolledToId; + if (isScrolledTo) { + menuItemStyle = { + ...menuItemStyle, + backgroundColor: colors.lightLinkBlue, + }; + menuItemInnerDivStyle = { + ...menuItemInnerDivStyle, + color: colors.white, + fontWeight: 'bold', + }; + } return (
- +