aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/react-docs/src/ts/components/documentation.tsx23
-rw-r--r--packages/react-shared/src/ts/components/nested_sidebar_menu.tsx8
2 files changed, 29 insertions, 2 deletions
diff --git a/packages/react-docs/src/ts/components/documentation.tsx b/packages/react-docs/src/ts/components/documentation.tsx
index 8db9b34b4..58523a1a9 100644
--- a/packages/react-docs/src/ts/components/documentation.tsx
+++ b/packages/react-docs/src/ts/components/documentation.tsx
@@ -54,12 +54,20 @@ export interface DocumentationProps {
topBarHeight?: number;
}
-export interface DocumentationState {}
+export interface DocumentationState {
+ isHoveringSidebar: boolean;
+}
export class Documentation extends React.Component<DocumentationProps, DocumentationState> {
public static defaultProps: Partial<DocumentationProps> = {
topBarHeight: 0,
};
+ constructor(props: DocumentationProps) {
+ super(props);
+ this.state = {
+ isHoveringSidebar: false,
+ };
+ }
public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) {
if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
const hash = window.location.hash.slice(1);
@@ -106,7 +114,10 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
...styles.menuContainer,
...styles.mainContainers,
height: `calc(100vh - ${this.props.topBarHeight}px)`,
+ overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
}}
+ onMouseEnter={this._onSidebarHover.bind(this)}
+ onMouseLeave={this._onSidebarHoverOff.bind(this)}
>
<NestedSidebarMenu
selectedVersion={this.props.selectedVersion}
@@ -338,4 +349,14 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
/>
);
}
+ private _onSidebarHover(event: React.FormEvent<HTMLInputElement>) {
+ this.setState({
+ isHoveringSidebar: true,
+ });
+ }
+ private _onSidebarHoverOff() {
+ this.setState({
+ isHoveringSidebar: false,
+ });
+ }
}
diff --git a/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx b/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx
index f907022d6..6a3cf2615 100644
--- a/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx
@@ -59,12 +59,18 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
return <div key={`section-${sectionName}`}>{this._renderMenuItems(menuItems)}</div>;
}
});
+ const maxWidthWithScrollbar = 307;
return (
<div>
{this.props.sidebarHeader}
{!_.isUndefined(this.props.versions) &&
!_.isUndefined(this.props.selectedVersion) && (
- <VersionDropDown selectedVersion={this.props.selectedVersion} versions={this.props.versions} />
+ <div style={{ maxWidth: maxWidthWithScrollbar }}>
+ <VersionDropDown
+ selectedVersion={this.props.selectedVersion}
+ versions={this.props.versions}
+ />
+ </div>
)}
<div className="pl1">{navigation}</div>
</div>