diff options
Diffstat (limited to 'packages/react-shared/src/components/nested_sidebar_menu.tsx')
-rw-r--r-- | packages/react-shared/src/components/nested_sidebar_menu.tsx | 46 |
1 files changed, 42 insertions, 4 deletions
diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 1ad61fcca..87622310a 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -14,9 +14,12 @@ export interface NestedSidebarMenuProps { sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; shouldReformatMenuItemNames?: boolean; + parentName?: string; } -export interface NestedSidebarMenuState {} +export interface NestedSidebarMenuState { + scrolledToId: string; +} const styles: Styles = { menuItemWithHeaders: { @@ -40,7 +43,28 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N public static defaultProps: Partial<NestedSidebarMenuProps> = { shouldDisplaySectionHeaders: true, shouldReformatMenuItemNames: true, + parentName: 'default', }; + private _urlIntervalCheckId: number; + constructor(props: NestedSidebarMenuProps) { + super(props); + this.state = { + scrolledToId: '', + }; + } + public componentDidMount(): void { + this._urlIntervalCheckId = window.setInterval(() => { + const scrollId = location.hash.slice(1); + if (scrollId !== this.state.scrolledToId) { + this.setState({ + scrolledToId: scrollId, + }); + } + }, 200); + } + public componentWillUnmount(): void { + window.clearInterval(this._urlIntervalCheckId); + } public render(): React.ReactNode { const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => { const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); @@ -48,7 +72,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N // 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"> + <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1"> {finalSectionName.toUpperCase()} </div> {this._renderMenuItems(links)} @@ -61,23 +85,37 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N return ( <div> {this.props.sidebarHeader} - <div className="pl1">{navigation}</div> + <div>{navigation}</div> </div> ); } 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; return ( <div key={`menuItem-${finalMenuItemName}`}> <Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}> - <MenuItem style={menuItemStyles} innerDivStyle={menuItemInnerDivStyles}> + <MenuItem + style={{ + ...menuItemStyles, + paddingLeft: 8, + borderRadius: 6, + backgroundColor: isScrolledTo ? colors.lightLinkBlue : 'inherit', + }} + innerDivStyle={{ + ...menuItemInnerDivStyles, + color: isScrolledTo ? colors.white : 'inherit', + fontWeight: isScrolledTo ? 'bold' : 'inherit', + }} + > <span style={{ textTransform: this.props.shouldReformatMenuItemNames ? 'capitalize' : 'none', |