diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/react-shared/src/components/nested_sidebar_menu.tsx | 64 |
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', |