feat: theme add sidebar activeBackgroundColor and activeTextColor (#1600)

README.md

@@ -285,21 +285,25 @@ You can use all of the following options with the standalone version of the <red
     * `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.textColor (if set by user) or theme.colors.primary.main
   * `groupItems` # Group headings
+    * `activeBackgroundColor`: # COMPUTED: theme.sidebar.backgroundColor
+    * `activeTextColor`: # COMPUTED: theme.sidebar.activeTextColor
     * `textTransform`: 'uppercase'
   * `level1Items` # Level 1 items like tags or section 1st level items
+    * `activeBackgroundColor`: # COMPUTED: theme.sidebar.backgroundColor
+    * `activeTextColor`: # COMPUTED: theme.sidebar.activeTextColor
     * `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
+  * `maxHeight`: # COMPUTED: sidebar.width
-  * `maxWidth`: # COMPUTED: menu.width
+  * `maxWidth`: # COMPUTED: sidebar.width
   * `gutter`: '2px' # logo image padding
 * `rightPanel`
   * `backgroundColor`: '#263238'

src/components/SideMenu/styled.elements.ts

@@ -66,11 +66,12 @@ export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
   }
 `;
 
-function menuItemActiveBg(depth, { theme }: { theme: ResolvedThemeInterface }): string {
+
+function menuItemActive(depth, { theme }: { theme: ResolvedThemeInterface }, option: string): string {
   if (depth > 1) {
-    return darken(0.1, theme.sidebar.backgroundColor);
+    return theme.sidebar.level1Items[option];
   } else if (depth === 1) {
-    return darken(0.05, theme.sidebar.backgroundColor);
+    return theme.sidebar.groupItems[option];
   } else {
     return '';
   }
@@ -102,17 +103,10 @@ export const menuItemDepth = {
     font-size: 0.8em;
     padding-bottom: 0;
     cursor: default;
-    color: ${props => props.theme.sidebar.textColor};
   `,
   1: css`
     font-size: 0.929em;
     text-transform: ${({ theme }) => theme.sidebar.level1Items.textTransform};
-    &:hover {
-      color: ${props => props.theme.sidebar.activeTextColor};
-    }
-  `,
-  2: css`
-    color: ${props => props.theme.sidebar.textColor};
   `,
 };
 
@@ -131,7 +125,7 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
 }))<MenuItemLabelType>`
   cursor: pointer;
   color: ${props =>
-    props.active ? props.theme.sidebar.activeTextColor : props.theme.sidebar.textColor};
+    props.active ? menuItemActive(props.depth, props, 'activeTextColor') : props.theme.sidebar.textColor};
   margin: 0;
   padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
   ${({ depth, type, theme }) =>
@@ -140,12 +134,14 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
   justify-content: space-between;
   font-family: ${props => props.theme.typography.headings.fontFamily};
   ${props => menuItemDepth[props.depth]};
-  background-color: ${props => (props.active ? menuItemActiveBg(props.depth, props) : '')};
+  background-color: ${props =>
+    props.active ? menuItemActive(props.depth, props, 'activeBackgroundColor') : props.theme.sidebar.backgroundColor};
 
   ${props => (props.deprecated && deprecatedCss) || ''};
 
   &:hover {
-    background-color: ${props => menuItemActiveBg(props.depth, props)};
+    color: ${props => menuItemActive(props.depth, props, 'activeTextColor')};
+    background-color: ${props => menuItemActive(props.depth, props, 'activeBackgroundColor')};
   }
 
   ${ShelfIcon} {

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: {
@@ -319,9 +323,13 @@ export interface ResolvedThemeInterface {
     textColor: string;
     activeTextColor: string;
     groupItems: {
+      activeBackgroundColor: string;
+      activeTextColor: string;
       textTransform: string;
     };
     level1Items: {
+      activeBackgroundColor: string;
+      activeTextColor: string;
       textTransform: string;
     };
     arrow: {