Chore: Only render one sidebar at a time

2 files changed, 5 insertions, 3 deletions

diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx
index 95adc417d..28a205d7a 100644
--- a/packages/website/ts/components/documentation/docs_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_top_bar.tsx
@@ -6,12 +6,13 @@ import * as React from 'react';
 import { DocsLogo } from 'ts/components/documentation/docs_logo';
 import { Container } from 'ts/components/ui/container';
 import { Text } from 'ts/components/ui/text';
-import { Deco, Key, WebsitePaths } from 'ts/types';
+import { Deco, Key, ScreenWidths, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
 export interface DocsTopBarProps {
     location: Location;
+    screenWidth: ScreenWidths;
     translate: Translate;
     sidebar?: React.ReactNode;
 }
@@ -105,7 +106,7 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
                     </Container>
                 </Container>
                 <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'11px'} />
-                {this._renderDrawer()}
+                {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()}
             </Container>
         );
     }
diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx
index 12c00b440..042d80c61 100644
--- a/packages/website/ts/pages/documentation/developers_page.tsx
+++ b/packages/website/ts/pages/documentation/developers_page.tsx
@@ -115,7 +115,7 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
                                         : sidebarPadding,
                                 }}
                             >
-                                {this.props.sidebar}
+                                {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar}
                             </div>
                         </div>
                     </Container>
@@ -128,6 +128,7 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
                         <Container paddingLeft={mainContentPadding} paddingRight={mainContentPadding}>
                             <DocsTopBar
                                 location={this.props.location}
+                                screenWidth={this.props.screenWidth}
                                 translate={this.props.translate}
                                 sidebar={this.props.sidebar}
                             />