chore: get menu onHover darken back

1 files changed, 27 insertions, 37 deletions

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<ALink[]>;
     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<NestedSidebarMenuProps, NestedSidebarMenuState> {
     public static defaultProps: Partial<NestedSidebarMenuProps> = {
-        shouldDisplaySectionHeaders: true,
         shouldReformatMenuItemNames: true,
         parentName: 'default',
     };
@@ -68,19 +65,15 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
     public render(): React.ReactNode {
         const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => {
             const finalSectionName = utils.convertCamelCaseToSpaces(sectionName);
-            if (this.props.shouldDisplaySectionHeaders) {
-                // tslint:disable-next-line:no-unused-variable
-                return (
-                    <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
-                        <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1">
-                            {finalSectionName.toUpperCase()}
-                        </div>
-                        {this._renderMenuItems(links)}
+            // tslint:disable-next-line:no-unused-variable
+            return (
+                <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
+                    <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1">
+                        {finalSectionName.toUpperCase()}
                     </div>
-                );
-            } else {
-                return <div key={`section-${sectionName}`}>{this._renderMenuItems(links)}</div>;
-            }
+                    {this._renderMenuItems(links)}
+                </div>
+            );
         });
         return (
             <div>
@@ -91,31 +84,28 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
     }
     private _renderMenuItems(links: ALink[]): React.ReactNode[] {
         const scrolledToId = this.state.scrolledToId;
-        const menuItemStyles = this.props.shouldDisplaySectionHeaders
-            ? styles.menuItemWithHeaders
-            : styles.menuItemWithoutHeaders;
-        const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {};
         const menuItems = _.map(links, link => {
-            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 (
                 <div key={`menuItem-${finalMenuItemName}`}>
                     <Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}>
-                        <MenuItem
-                            style={{
-                                ...menuItemStyles,
-                                paddingLeft: 8,
-                                borderRadius: 6,
-                                backgroundColor: isScrolledTo ? colors.lightLinkBlue : 'inherit',
-                            }}
-                            innerDivStyle={{
-                                ...menuItemInnerDivStyles,
-                                color: isScrolledTo ? colors.white : 'inherit',
-                                fontWeight: isScrolledTo ? 'bold' : 'inherit',
-                            }}
-                        >
+                        <MenuItem style={menuItemStyle} innerDivStyle={menuItemInnerDivStyle}>
                             <span
                                 style={{
                                     textTransform: this.props.shouldReformatMenuItemNames ? 'capitalize' : 'none',