aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-10-16 22:35:56 +0800
committerFabio Berger <me@fabioberger.com>2018-10-16 22:35:56 +0800
commitf35156517d8fe63935f34cec880b144aae3f55aa (patch)
tree5694eaee251b8907f420cbcf0a4568616d0247b4
parentbe45a3085196a652fc21856b43014bec9ba07f05 (diff)
downloaddexon-sol-tools-f35156517d8fe63935f34cec880b144aae3f55aa.tar
dexon-sol-tools-f35156517d8fe63935f34cec880b144aae3f55aa.tar.gz
dexon-sol-tools-f35156517d8fe63935f34cec880b144aae3f55aa.tar.bz2
dexon-sol-tools-f35156517d8fe63935f34cec880b144aae3f55aa.tar.lz
dexon-sol-tools-f35156517d8fe63935f34cec880b144aae3f55aa.tar.xz
dexon-sol-tools-f35156517d8fe63935f34cec880b144aae3f55aa.tar.zst
dexon-sol-tools-f35156517d8fe63935f34cec880b144aae3f55aa.zip
chore: get menu onHover darken back
-rw-r--r--packages/react-shared/src/components/nested_sidebar_menu.tsx64
1 files changed, 27 insertions, 37 deletions
diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index 87622310a..70062182b 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -12,7 +12,6 @@ import { Link } from './link';
export interface NestedSidebarMenuProps {
sectionNameToLinks: ObjectMap<ALink[]>;
sidebarHeader?: React.ReactNode;
- shouldDisplaySectionHeaders?: boolean;
shouldReformatMenuItemNames?: boolean;
parentName?: string;
}
@@ -22,13 +21,12 @@ export interface NestedSidebarMenuState {
}
const styles: Styles = {
- menuItemWithHeaders: {
+ menuItem: {
minHeight: 0,
+ paddingLeft: 8,
+ borderRadius: 6,
},
- menuItemWithoutHeaders: {
- minHeight: 48,
- },
- menuItemInnerDivWithHeaders: {
+ menuItemInnerDiv: {
color: colors.grey800,
fontSize: 14,
lineHeight: 2,
@@ -41,7 +39,6 @@ const styles: Styles = {
export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> {
public static defaultProps: Partial<NestedSidebarMenuProps> = {
- shouldDisplaySectionHeaders: true,
shouldReformatMenuItemNames: true,
parentName: 'default',
};
@@ -68,19 +65,15 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
public render(): React.ReactNode {
const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => {
const finalSectionName = utils.convertCamelCaseToSpaces(sectionName);
- if (this.props.shouldDisplaySectionHeaders) {
- // tslint:disable-next-line:no-unused-variable
- return (
- <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
- <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1">
- {finalSectionName.toUpperCase()}
- </div>
- {this._renderMenuItems(links)}
+ // tslint:disable-next-line:no-unused-variable
+ return (
+ <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
+ <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1">
+ {finalSectionName.toUpperCase()}
</div>
- );
- } else {
- return <div key={`section-${sectionName}`}>{this._renderMenuItems(links)}</div>;
- }
+ {this._renderMenuItems(links)}
+ </div>
+ );
});
return (
<div>
@@ -91,31 +84,28 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
}
private _renderMenuItems(links: ALink[]): React.ReactNode[] {
const scrolledToId = this.state.scrolledToId;
- const menuItemStyles = this.props.shouldDisplaySectionHeaders
- ? styles.menuItemWithHeaders
- : styles.menuItemWithoutHeaders;
- const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {};
const menuItems = _.map(links, link => {
- const isScrolledTo = link.to === scrolledToId;
const finalMenuItemName = this.props.shouldReformatMenuItemNames
? utils.convertDashesToSpaces(link.title)
: link.title;
+ let menuItemStyle = styles.menuItem;
+ let menuItemInnerDivStyle = styles.menuItemInnerDiv;
+ const isScrolledTo = link.to === scrolledToId;
+ if (isScrolledTo) {
+ menuItemStyle = {
+ ...menuItemStyle,
+ backgroundColor: colors.lightLinkBlue,
+ };
+ menuItemInnerDivStyle = {
+ ...menuItemInnerDivStyle,
+ color: colors.white,
+ fontWeight: 'bold',
+ };
+ }
return (
<div key={`menuItem-${finalMenuItemName}`}>
<Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}>
- <MenuItem
- style={{
- ...menuItemStyles,
- paddingLeft: 8,
- borderRadius: 6,
- backgroundColor: isScrolledTo ? colors.lightLinkBlue : 'inherit',
- }}
- innerDivStyle={{
- ...menuItemInnerDivStyles,
- color: isScrolledTo ? colors.white : 'inherit',
- fontWeight: isScrolledTo ? 'bold' : 'inherit',
- }}
- >
+ <MenuItem style={menuItemStyle} innerDivStyle={menuItemInnerDivStyle}>
<span
style={{
textTransform: this.props.shouldReformatMenuItemNames ? 'capitalize' : 'none',