feat theme add sidebar activeBackgroundColor and activeTextColor

README.md

@@ -293,21 +293,24 @@ You can use all of the following options with standalone version on <redoc> 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
+  * `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

@@ -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)};
   }
 

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: {