Implement nativeScrollbars option

src/components/SideMenu/MenuItems.tsx

@@ -10,6 +10,7 @@ interface MenuItemsProps {
   items: IMenuItem[];
   active?: boolean;
   onActivate?: (item: IMenuItem) => void;
+  style?: React.CSSProperties;
 }
 
 @observer
@@ -18,7 +19,7 @@ export class MenuItems extends React.Component<MenuItemsProps> {
     const { items } = this.props;
     const active = this.props.active == null ? true : this.props.active;
     return (
-      <MenuItemUl active={active}>
+      <MenuItemUl style={this.props.style} active={active}>
         {items.map((item, idx) => (
           <MenuItem key={idx} item={item} onActivate={this.props.onActivate} />
         ))}

src/components/SideMenu/SideMenu.tsx

@@ -1,3 +1,4 @@
+import { ComponentWithOptions } from '../OptionsProvider';
 import * as React from 'react';
 import { observer } from 'mobx-react';
 
@@ -7,10 +8,20 @@ import { MenuItems } from './MenuItems';
 import { PerfectScrollbar } from '../../common-elements/perfect-scrollbar';
 
 @observer
-export class SideMenu extends React.Component<{ menu: MenuStore }> {
+export class SideMenu extends ComponentWithOptions<{ menu: MenuStore }> {
   render() {
     const store = this.props.menu;
-    return (
+    const nativeScrollbars = this.options.nativeScrollbars;
+    return nativeScrollbars ? (
+      <MenuItems
+        style={{
+          overflow: 'auto',
+          '-ms-overflow-style': '-ms-autohiding-scrollbar',
+        }}
+        items={store.items}
+        onActivate={this.activate}
+      />
+    ) : (
       <PerfectScrollbar>
         <MenuItems items={store.items} onActivate={this.activate} />
       </PerfectScrollbar>

src/services/RedocNormalizedOptions.ts

@@ -9,6 +9,7 @@ export interface RedocRawOptions {
   expandResponses?: string | 'all';
   requiredPropsFirst?: boolean | string;
   noAutoAuth?: boolean | string;
+  nativeScrollbars?: boolean | string;
 }
 
 function argValueToBoolean(val?: string | boolean): boolean {
@@ -24,6 +25,7 @@ export class RedocNormalizedOptions {
   expandResponses: { [code: string]: boolean } | 'all';
   requiredPropsFirst: boolean;
   noAutoAuth: boolean;
+  nativeScrollbars: boolean;
 
   constructor(raw: RedocRawOptions) {
     this.theme = { ...(raw.theme || {}), ...defaultTheme }; // todo: merge deep
@@ -32,6 +34,7 @@ export class RedocNormalizedOptions {
     this.expandResponses = RedocNormalizedOptions.normalizeExpandResponses(raw.expandResponses);
     this.requiredPropsFirst = argValueToBoolean(raw.requiredPropsFirst);
     this.noAutoAuth = argValueToBoolean(raw.noAutoAuth);
+    this.nativeScrollbars = argValueToBoolean(raw.nativeScrollbars);
   }
 
   static normalizeExpandResponses(value: RedocRawOptions['expandResponses']) {