diff options
| author | Fabio Berger <me@fabioberger.com> | 2018-09-28 21:28:06 +0800 |
|---|---|---|
| committer | Fabio Berger <me@fabioberger.com> | 2018-09-28 21:28:06 +0800 |
| commit | 12cfa6b45063b40e39a2f2e6c169fc2102843a16 (patch) | |
| tree | eab275c4f4ac1be9f7dbb574a487b8210d8e563a /packages/react-shared/src | |
| parent | 10bd255e9d05d8fec5787535953ba656f8263015 (diff) | |
| download | dexon-sol-tools-12cfa6b45063b40e39a2f2e6c169fc2102843a16.tar.gz dexon-sol-tools-12cfa6b45063b40e39a2f2e6c169fc2102843a16.tar.zst dexon-sol-tools-12cfa6b45063b40e39a2f2e6c169fc2102843a16.zip | |
Make sidebar menu item formatting optional so package names (with hyphens) render properly
Diffstat (limited to 'packages/react-shared/src')
| -rw-r--r-- | packages/react-shared/src/components/nested_sidebar_menu.tsx | 19 |
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)} |