aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/react-shared/src/components/nested_sidebar_menu.tsx19
1 files changed, 14 insertions, 5 deletions
diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index c8bddb59a..3c61fb0b1 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -19,6 +19,7 @@ export interface NestedSidebarMenuProps {
selectedVersion?: string;
versions?: string[];
onVersionSelected?: (semver: string) => void;
+ shouldReformatMenuItemNames?: boolean;
}
export interface NestedSidebarMenuState {}
@@ -42,16 +43,16 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
public static defaultProps: Partial<NestedSidebarMenuProps> = {
shouldDisplaySectionHeaders: true,
onMenuItemClick: _.noop.bind(_),
+ shouldReformatMenuItemNames: true,
};
public render(): React.ReactNode {
const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => {
const finalSectionName = utils.convertCamelCaseToSpaces(sectionName);
if (this.props.shouldDisplaySectionHeaders) {
// tslint:disable-next-line:no-unused-variable
- const id = utils.getIdFromName(sectionName);
return (
- <div key={`section-${sectionName}`} className="py1" style={{ color: colors.grey800 }}>
- <div style={{ fontWeight: 'bold', fontSize: 15 }} className="py1">
+ <div key={`section-${sectionName}`} className="py1" style={{ color: colors.linkSectionGrey }}>
+ <div style={{ fontWeight: 'bold', fontSize: 15, letterSpacing: 0.5 }} className="py1">
{finalSectionName.toUpperCase()}
</div>
{this._renderMenuItems(menuItems)}
@@ -86,7 +87,9 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
: styles.menuItemWithoutHeaders;
const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {};
const menuItems = _.map(menuItemNames, menuItemName => {
- const finalMenuItemName = utils.convertDashesToSpaces(menuItemName);
+ const finalMenuItemName = this.props.shouldReformatMenuItemNames
+ ? utils.convertDashesToSpaces(menuItemName)
+ : menuItemName;
const id = utils.getIdFromName(menuItemName);
return (
<div key={menuItemName}>
@@ -99,7 +102,13 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
containerId={constants.DOCS_CONTAINER_ID}
>
<MenuItem style={menuItemStyles} innerDivStyle={menuItemInnerDivStyles}>
- <span style={{ textTransform: 'capitalize' }}>{finalMenuItemName}</span>
+ <span
+ style={{
+ textTransform: this.props.shouldReformatMenuItemNames ? 'capitalize' : 'none',
+ }}
+ >
+ {finalMenuItemName}
+ </span>
</MenuItem>
</ScrollLink>
{this._renderMenuItemSubsections(menuItemName)}