sticky sidebar

package.json

@@ -84,6 +84,7 @@
     "react-tabs": "^2.0.0",
     "remarkable": "^1.7.1",
     "slugify": "^1.2.1",
+    "stickyfill": "^1.1.1",
     "styled-components": "^2.2.1",
     "swagger2openapi": "^2.11.0"
   },

src/components/Redoc/Redoc.tsx

@@ -1,15 +1,16 @@
-import { ThemeInterface } from '../../theme';
 import * as React from 'react';
+import Stickyfill from 'stickyfill';
+
 import { ThemeProvider } from '../../styled-components';
 
 import { ApiInfo } from '../ApiInfo/ApiInfo';
-import { RedocWrap, MenuContent, ApiContent } from './elements';
+import { RedocWrap, StickySidebar, ApiContent } from './elements';
 import { ApiLogo } from '../ApiLogo/ApiLogo';
 import { SideMenu } from '../SideMenu/SideMenu';
 import { ContentItems } from '../ContentItems/ContentItems';
 import { AppStore } from '../../services';
 
-import defaultTheme from '../../theme';
+import defaultTheme, { ThemeInterface } from '../../theme';
 
 export interface RedocProps {
   store: AppStore;
@@ -19,8 +20,16 @@ export interface RedocProps {
 }
 
 export class Redoc extends React.Component<RedocProps> {
+  stickyfill = Stickyfill();
+  stickyElement: Element;
+
   componentDidMount() {
     this.props.store.menu.updateOnHash();
+    this.stickyfill.add(this.stickyElement);
+  }
+
+  componentWillUnmount() {
+    this.stickyfill.remove(this.stickyElement);
   }
 
   render() {
@@ -28,13 +37,18 @@ export class Redoc extends React.Component<RedocProps> {
     return (
       <ThemeProvider theme={{ ...options.theme, ...defaultTheme }}>
         <RedocWrap className="redoc-wrap">
-          <MenuContent className="menu-content">
+          <StickySidebar
+            className="menu-content"
+            ref={el => {
+              this.stickyElement = el;
+            }}
+          >
             <ApiLogo info={spec.info} />
             <SideMenu menu={menu} />
-          </MenuContent>
+          </StickySidebar>
           <ApiContent className="api-content">
             <ApiInfo info={spec.info} externalDocs={spec.externalDocs} />
-            <ContentItems items={menu.items as any} />;
+            <ContentItems items={menu.items as any} />
           </ApiContent>
         </RedocWrap>
       </ThemeProvider>

src/components/Redoc/elements.tsx

@@ -3,7 +3,6 @@ import styled from '../../styled-components';
 export { ClassAttributes } from 'react';
 
 export const RedocWrap = styled.div`
-  overflow: hidden;
   font-family: ${props => props.theme.baseFont.family};
   font-size: ${props => props.theme.baseFont.size};
   line-height: ${props => props.theme.baseFont.lineHeight};
@@ -34,19 +33,22 @@ export const RedocWrap = styled.div`
   }
 `;
 
-export const MenuContent = styled.div`
-  width: ${props => props.theme.menu.width};
+export const StickySidebar = styled.div`
+  min-width: ${props => props.theme.menu.width};
   background-color: ${props => props.theme.menu.backgroundColor};
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  transform: translateZ(0px);
-  height: 100vh;
-  position: fixed;
+
+  transform: translateZ(0);
+
+  max-height: 100vh;
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0;
 `;
 
 export const ApiContent = styled.div`
-  margin-left: ${props => props.theme.menu.width};
   z-index: 10;
   position: relative;
 `;

yarn.lock

@@ -6305,6 +6305,10 @@ statuses@~1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
 
+stickyfill@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stickyfill/-/stickyfill-1.1.1.tgz#39413fee9d025c74a7e59ceecb23784cc0f17f02"
+
 stream-browserify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"