diff --git a/README.md b/README.md index 6155e482..c3d7bfc4 100644 --- a/README.md +++ b/README.md @@ -293,21 +293,24 @@ You can use all of the following options with standalone version on tag * `color`: # COMPUTED: colors.primary.main * `visited`: # COMPUTED: typography.links.color * `hover`: # COMPUTED: lighten(0.2 typography.links.color) -* `menu` +* `sidebar` * `width`: '260px' * `backgroundColor`: '#fafafa' * `textColor`: '#333333' - * `activeTextColor`: # COMPUTED: theme.menu.textColor (if set by user) or theme.colors.primary.main + * `activeTextColor`: # COMPUTED: theme.sidebar.backgroundColor * `groupItems` # Group headings + * `activeBackgroundColor`: # COMPUTED: theme.sidebar.textColor (if set by user) or theme.colors.primary.main + * `activeTextColor`: # COMPUTED: theme.sidebar.textColor (if set by user) or theme.colors.primary.main * `textTransform`: 'uppercase' * `level1Items` # Level 1 items like tags or section 1st level items + * `activeTextColor`: # COMPUTED: theme.sidebar.textColor (if set by user) or theme.colors.primary.main * `textTransform`: 'none' - * `arrow` # menu arrow + * `arrow` # sidebar arrow * `size`: '1.5em' - * `color`: # COMPUTED: theme.menu.textColor + * `color`: # COMPUTED: theme.sidebar.textColor * `logo` - * `maxHeight`: # COMPUTED: menu.width - * `maxWidth`: # COMPUTED: menu.width + * `maxHeight`: # COMPUTED: sidebar.width + * `maxWidth`: # COMPUTED: sidebar.width * `gutter`: '2px' # logo image padding * `rightPanel` * `backgroundColor`: '#263238' diff --git a/src/components/SideMenu/styled.elements.ts b/src/components/SideMenu/styled.elements.ts index e95c1d95..514e0417 100644 --- a/src/components/SideMenu/styled.elements.ts +++ b/src/components/SideMenu/styled.elements.ts @@ -68,9 +68,19 @@ export const OperationBadge = styled.span.attrs((props: { type: string }) => ({ function menuItemActiveBg(depth, { theme }: { theme: ResolvedThemeInterface }): string { if (depth > 1) { - return darken(0.1, theme.sidebar.backgroundColor); + return theme.sidebar.level1Items.activeBackgroundColor; } else if (depth === 1) { - return darken(0.05, theme.sidebar.backgroundColor); + return theme.sidebar.groupItems.activeBackgroundColor; + } else { + return ''; + } +} + +function menuItemActiveTextColor(depth, { theme }: { theme: ResolvedThemeInterface }): string { + if (depth > 1) { + return theme.sidebar.level1Items.activeTextColor; + } else if (depth === 1) { + return theme.sidebar.groupItems.activeTextColor; } else { return ''; } @@ -108,7 +118,7 @@ export const menuItemDepth = { font-size: 0.929em; text-transform: ${({ theme }) => theme.sidebar.level1Items.textTransform}; &:hover { - color: ${props => props.theme.sidebar.activeTextColor}; + color: ${props => props.theme.sidebar.level1Items.activeTextColor}; } `, 2: css` @@ -145,6 +155,7 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({ ${props => (props.deprecated && deprecatedCss) || ''}; &:hover { + color: ${props => menuItemActiveTextColor(props.depth, props)}; background-color: ${props => menuItemActiveBg(props.depth, props)}; } diff --git a/src/theme.ts b/src/theme.ts index 8856451f..a4b85954 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -139,9 +139,13 @@ const defaultTheme: ThemeInterface = { ? theme.sidebar.textColor : theme.colors.primary.main, groupItems: { - textTransform: 'uppercase', + activeBackgroundColor: theme => darken(0.1, theme.sidebar.backgroundColor), + activeTextColor: theme => theme.sidebar.activeTextColor, + textTransform: 'uppercase' }, level1Items: { + activeBackgroundColor: theme => darken(0.05, theme.sidebar.backgroundColor), + activeTextColor: theme => theme.sidebar.activeTextColor, textTransform: 'none', }, arrow: { @@ -315,9 +319,13 @@ export interface ResolvedThemeInterface { textColor: string; activeTextColor: string; groupItems: { + activeBackgroundColor: string; + activeTextColor: string; textTransform: string; }; level1Items: { + activeBackgroundColor: string; + activeTextColor: string; textTransform: string; }; arrow: {