hide sidebar scrollbar unless onHover

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>