diff options
| -rw-r--r-- | packages/website/ts/components/ui/container.tsx | 1 | ||||
| -rw-r--r-- | packages/website/ts/pages/documentation/home.tsx | 35 |
2 files changed, 30 insertions, 6 deletions
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 1e0bfd959..782ab3b6f 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -17,6 +17,7 @@ export interface ContainerProps { backgroundColor?: string; background?: string; borderRadius?: StringOrNum; + borderBottom?: StringOrNum; maxWidth?: StringOrNum; maxHeight?: StringOrNum; width?: StringOrNum; diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 0aefc4662..19a3f9eaf 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -360,24 +360,35 @@ export interface HomeProps { export interface HomeState { isHoveringSidebar: boolean; isHoveringMainContent: boolean; + isSidebarScrolling: boolean; } export class Home extends React.Component<HomeProps, HomeState> { private readonly _throttledScreenWidthUpdate: () => void; + private readonly _throttledSidebarScrolling: () => void; + private _sidebarScrollClearingInterval: number; constructor(props: HomeProps) { super(props); this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + this._throttledSidebarScrolling = _.throttle(this._onSidebarScroll.bind(this), THROTTLE_TIMEOUT); this.state = { isHoveringSidebar: false, isHoveringMainContent: false, + isSidebarScrolling: false, }; } public componentDidMount(): void { window.addEventListener('resize', this._throttledScreenWidthUpdate); window.scrollTo(0, 0); + this._sidebarScrollClearingInterval = window.setInterval(() => { + this.setState({ + isSidebarScrolling: false, + }); + }, 1000); } public componentWillUnmount(): void { window.removeEventListener('resize', this._throttledScreenWidthUpdate); + window.clearInterval(this._sidebarScrollClearingInterval); } public render(): React.ReactNode { const scrollableContainerStyles: React.CSSProperties = { @@ -422,10 +433,14 @@ export class Home extends React.Component<HomeProps, HomeState> { width={234} paddingLeft={22} paddingRight={22} - paddingTop={2} + paddingTop={0} backgroundColor={colors.grey100} > - <DocsLogo height={36} containerStyle={{ paddingTop: 30, paddingBottom: 12 }} /> + <Container + borderBottom={this.state.isSidebarScrolling ? `1px solid ${colors.grey300}` : 'none'} + > + <DocsLogo height={36} containerStyle={{ paddingTop: 30, paddingBottom: 10 }} /> + </Container> <div style={{ ...scrollableContainerStyles, @@ -434,6 +449,7 @@ export class Home extends React.Component<HomeProps, HomeState> { }} onMouseEnter={this._onSidebarHover.bind(this, true)} onMouseLeave={this._onSidebarHover.bind(this, false)} + onWheel={this._throttledSidebarScrolling} > {this._renderMenu(sectionNameToLinks)} </div> @@ -524,7 +540,7 @@ export class Home extends React.Component<HomeProps, HomeState> { ); }); return ( - <Container paddingLeft="22px" paddingBottom="100px"> + <Container paddingLeft="22px" paddingRight="22px" paddingBottom="100px"> {navigation} </Container> ); @@ -625,9 +641,11 @@ export class Home extends React.Component<HomeProps, HomeState> { ); } private _onSidebarHover(isHovering: boolean, _event: React.FormEvent<HTMLInputElement>): void { - this.setState({ - isHoveringSidebar: isHovering, - }); + if (isHovering !== this.state.isHoveringSidebar) { + this.setState({ + isHoveringSidebar: isHovering, + }); + } } private _onMainContentHover(isHovering: boolean, _event: React.FormEvent<HTMLInputElement>): void { if (isHovering !== this.state.isHoveringMainContent) { @@ -636,6 +654,11 @@ export class Home extends React.Component<HomeProps, HomeState> { }); } } + private _onSidebarScroll(_event: React.FormEvent<HTMLInputElement>): void { + this.setState({ + isSidebarScrolling: true, + }); + } private _updateScreenWidth(): void { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); |