Add a new option to set the divider color

elchininet · Oct 20, 2024 · c66d031 · c66d031
1 parent 50c7b8c
commit c66d031
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -151,6 +151,7 @@ Add a file named `sidebar-config.yaml` or `sidebar-config.json` into your `<conf
 | info_color<sup>\*</sup> | String                        | no       | Sets the color of the info texts of the sidebar items |
 | info_color_selected<sup>\*</sup> | String               | no       | Sets the color of the info text of the selected sidebar item |
 | notification_color<sup>\*</sup>  | String               | no       | Sets the color of the sidebar notifications |
+| divider_color<sup>\*</sup>       | String               | no       | Sets the color of the sidebar dividers |
 | styles             | String                             | no       | Custom styles that will be added to the styles block of the plugin. Useful to override styles |
 
 >\* These options allow [JavaScript](#javascript-templates) or [Jinja](#jinja-templates) templates.

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -39,6 +39,7 @@ export enum SELECTOR {
     SIDEBAR_NOTIFICATIONS = '.notifications',
     PROFILE = '.profile',
     MENU = '.menu',
+    DIVIDER = '.divider',
     HA_ICON_BUTTON = 'ha-icon-button'
 }
 
@@ -52,6 +53,7 @@ export enum CSS_VARIABLES {
     SIDEBAR_BUTTON_COLOR = '--sidebar-icon-color',
     SIDEBAR_MENU_BUTTON_BACKGROUND_COLOR = '--sidebar-menu-button-background-color',
     PRIMARY_BACKGROUND_COLOR = '--primary-background-color',
+    DIVIDER_COLOR = '--divider-color',
     CUSTOM_SIDEBAR_BACKGROUND = '--custom-sidebar-background',
     CUSTOM_SIDEBAR_MENU_BACKGROUND = '--custom-sidebar-menu-background',
     CUSTOM_SIDEBAR_TEXT_COLOR = '--custom-sidebar-text-color',
@@ -62,7 +64,8 @@ export enum CSS_VARIABLES {
     CUSTOM_SIDEBAR_INFO_COLOR = '--custom-sidebar-info-color',
     CUSTOM_SIDEBAR_SELECTED_INFO_COLOR = '--custom-sidebar-selected-info-color',
     CUSTOM_SIDEBAR_NOTIFICATION_COLOR = '--custom-sidebar-notification-color',
-    CUSTOM_SIDEBAR_SELECTION_OPACITY = '--custom-sidebar-selection-opacity'
+    CUSTOM_SIDEBAR_SELECTION_OPACITY = '--custom-sidebar-selection-opacity',
+    CUSTOM_SIDEBAR_DIVIDER_COLOR = '--custom-sidebar-divider-color'
 }
 
 export enum CLASS {

diff --git a/src/custom-sidebar.ts b/src/custom-sidebar.ts
@@ -574,7 +574,8 @@ class CustomSidebar {
                     ['info_color',            CSS_VARIABLES.CUSTOM_SIDEBAR_INFO_COLOR],
                     ['info_color_selected',   CSS_VARIABLES.CUSTOM_SIDEBAR_SELECTED_INFO_COLOR],
                     ['notification_color',    CSS_VARIABLES.CUSTOM_SIDEBAR_NOTIFICATION_COLOR],
-                    ['selection_opacity',     CSS_VARIABLES.CUSTOM_SIDEBAR_SELECTION_OPACITY]
+                    ['selection_opacity',     CSS_VARIABLES.CUSTOM_SIDEBAR_SELECTION_OPACITY],
+                    ['divider_color',         CSS_VARIABLES.CUSTOM_SIDEBAR_DIVIDER_COLOR]
                 ]
             );
 
@@ -627,6 +628,7 @@ class CustomSidebar {
                     background: var(${ CSS_VARIABLES.CUSTOM_SIDEBAR_BACKGROUND }, var(${ CSS_VARIABLES.SIDEBAR_BACKGROUND_COLOR })) !important;
                     & ${ SELECTOR.MENU } {
                         background: var(${ CSS_VARIABLES.CUSTOM_SIDEBAR_MENU_BACKGROUND }, var(${ CSS_VARIABLES.CUSTOM_SIDEBAR_BACKGROUND }, var(${ CSS_VARIABLES.SIDEBAR_MENU_BUTTON_BACKGROUND_COLOR }, var(${ CSS_VARIABLES.PRIMARY_BACKGROUND_COLOR }))));
+                        border-bottom: 1px solid var(${ CSS_VARIABLES.CUSTOM_SIDEBAR_DIVIDER_COLOR }, var(${ CSS_VARIABLES.DIVIDER_COLOR }));
                     }
                     & ${ SELECTOR.ITEM } {
                         & > ${ ELEMENT.PAPER_ICON_ITEM } {
@@ -678,6 +680,9 @@ class CustomSidebar {
                             background-color: var(${CSS_VARIABLES.CUSTOM_SIDEBAR_NOTIFICATION_COLOR}, var(--accent-color));
                         }
                     }
+                    & ${ SELECTOR.DIVIDER }::before {
+                        background-color: var(${ CSS_VARIABLES.CUSTOM_SIDEBAR_DIVIDER_COLOR }, var(${ CSS_VARIABLES.DIVIDER_COLOR }));
+                    }
                 }
                 :host([expanded]) {
                     ${ ELEMENT.PAPER_LISTBOX } {
@@ -706,6 +711,7 @@ class CustomSidebar {
                             &${ SELECTOR.ITEM_SELECTED } {
                                 & > ${ ELEMENT.PAPER_ICON_ITEM } {
                                     & > ${ SELECTOR.ITEM_TEXT } {
+                                        z-index: 1;
                                         &[data-info]::after {
                                             color: var(${ CSS_VARIABLES.CUSTOM_SIDEBAR_SELECTED_INFO_COLOR }, var(${ CSS_VARIABLES.SIDEBAR_SELECTED_TEXT_COLOR }));
                                         }

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -97,6 +97,7 @@ interface BaseConfig extends ColorConfig {
     sidebar_background?: string;
     sidebar_button_color?: string;
     menu_background?: string;
+    divider_color?: string;
     styles?: string;
 }
 

diff --git a/src/utilities/index.ts b/src/utilities/index.ts
@@ -30,7 +30,8 @@ const EXTENDABLE_OPTIONS = [
     'info_color',
     'info_color_selected',
     'notification_color',
-    'selection_opacity'
+    'selection_opacity',
+    'divider_color'
 ] as const;
 
 type ExtendableConfigOption = typeof EXTENDABLE_OPTIONS[number];

diff --git a/src/validators/index.ts b/src/validators/index.ts
@@ -63,6 +63,7 @@ const validateExceptionItem = (exception: ConfigException): void => {
             'title_color',
             'sidebar_button_color',
             'menu_background',
+            'divider_color',
             'styles'
         ],
         `${ERROR_PREFIX}, exceptions`
@@ -198,6 +199,7 @@ export const validateConfig = (config: Config): void => {
             'title_color',
             'sidebar_button_color',
             'menu_background',
+            'divider_color',
             'styles'
         ],
         `${ERROR_PREFIX},`