aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/components/nested_sidebar_menu.tsx13
-rw-r--r--packages/website/ts/pages/documentation/doc_page.tsx6
-rw-r--r--packages/website/ts/pages/documentation/docs_home.tsx1
-rw-r--r--packages/website/ts/pages/wiki/wiki.tsx1
4 files changed, 18 insertions, 3 deletions
diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx
index 552839fb7..4d4bc4617 100644
--- a/packages/website/ts/components/nested_sidebar_menu.tsx
+++ b/packages/website/ts/components/nested_sidebar_menu.tsx
@@ -4,11 +4,13 @@ import * as _ from 'lodash';
import * as React from 'react';
import { Button } from 'ts/components/ui/button';
import { Text } from 'ts/components/ui/text';
+import { ScreenWidths } from 'ts/types';
export interface NestedSidebarMenuProps {
sectionNameToLinks: ObjectMap<ALink[]>;
sidebarHeader?: React.ReactNode;
shouldReformatMenuItemNames?: boolean;
+ screenWidth: ScreenWidths;
}
export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
@@ -22,7 +24,7 @@ export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
...link,
title: menuItemTitle,
};
- return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} />;
+ return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} screenWidth={props.screenWidth} />;
});
// tslint:disable-next-line:no-unused-variable
return (
@@ -44,6 +46,7 @@ export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
export interface MenuItemProps {
link: ALink;
+ screenWidth: ScreenWidths;
}
export interface MenuItemState {
@@ -70,7 +73,13 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
borderRadius="4px"
padding="0.4em 0.375em"
width="100%"
- backgroundColor={isActive ? colors.lightLinkBlue : 'transparent'}
+ backgroundColor={
+ isActive
+ ? colors.lightLinkBlue
+ : this.props.screenWidth === ScreenWidths.Sm
+ ? 'white'
+ : colors.grey100
+ }
fontSize="14px"
textAlign="left"
>
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index 28bf2dba1..80bde130c 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -94,7 +94,11 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
const sidebar = _.isUndefined(this.state.docAgnosticFormat) ? (
<div />
) : (
- <NestedSidebarMenu sidebarHeader={this._renderSidebarHeader()} sectionNameToLinks={sectionNameToLinks} />
+ <NestedSidebarMenu
+ sidebarHeader={this._renderSidebarHeader()}
+ sectionNameToLinks={sectionNameToLinks}
+ screenWidth={this.props.screenWidth}
+ />
);
return (
<DevelopersPage
diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx
index bbbee2d2d..017573304 100644
--- a/packages/website/ts/pages/documentation/docs_home.tsx
+++ b/packages/website/ts/pages/documentation/docs_home.tsx
@@ -346,6 +346,7 @@ export class DocsHome extends React.Component<DocsHomeProps, DocsHomeState> {
sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined}
sectionNameToLinks={sectionNameToLinks}
shouldReformatMenuItemNames={false}
+ screenWidth={this.props.screenWidth}
/>
);
return (
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index c1802b1f8..c3c1600a5 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -76,6 +76,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
<NestedSidebarMenu
sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined}
sectionNameToLinks={sectionNameToLinks}
+ screenWidth={this.props.screenWidth}
/>
);
return (