Add "divider" and "divider_color" to order item options

docs/docs/03-configuration/02-main-configuration-options.mdx

@@ -64,7 +64,7 @@ These options are intended to change the functionality of the sidebar and to cha
 | ------------------------- | ------- | --------- | ----------- |
 | item                      | String  | yes       | This is a string that will be used to match each sidebar item by its text, its `data-panel` attribute or its `href`. If the `exact` property is not set, it is case insensitive and it can be a substring such as `developer` instead of `Developer Tools` or `KITCHEN` instead of `kitchen-lights` |
 | match                     | String  | no        | This property will define which string will be used to match the `item` property. It has three possible values "text" (default) to match the text content of the element, "data-panel" to match the `data-panel` attribute of the element, or "href", to match the `href` attribute of the element |
-| exact                     | Boolean | no        | Specifies whether the `item` string match should be an exact match (`true`) or not (`false`). |
+| exact                     | Boolean | no        | Specifies whether the `item` string match should be an exact match (`true`) or not (`false`) |
 | order                     | Number  | no        | Sets the order of the sidebar item |
 | hide<sup>\*</sup>         | Boolean or String | no | Setting this property to `true` will hide the sidebar item and if the property `hide_all` from the main configuration is `true`, setting this property as `false` will avoid hiding the item |
 | name<sup>\*</sup>         | String  | no        | Changes the name of the sidebar item |
@@ -74,7 +74,8 @@ These options are intended to change the functionality of the sidebar and to cha
 | bottom                    | Boolean | no        | Setting this property to `true` will group the item with the bottom items (Configuration, Developer Tools, etc) |
 | href                      | String  | no        | Specifies the `href` of the sidebar item |
 | target                    | String  | no        | Specifies the [target property] of the sidebar item |
-| on_click                  | See below  | no        | Specifies the `onClick` property of the sidebar item. It allows two types of actions, service call actions or javascript actions. Take into account that setting this property will not prevent redirecting to an internal dashboard or an external URL if the `href` property is set. If you want to avoid navigating to a page, you should set the `href` option as `#` (in new items you can just omit it). Check the [Short Configuration Example](#short-configuration-example-1) below for an example of its usage. |
+| on_click                  | See below  | no     | Specifies the `onClick` property of the sidebar item. It allows two types of actions, service call actions or javascript actions. Take into account that setting this property will not prevent redirecting to an internal dashboard or an external URL if the `href` property is set. If you want to avoid navigating to a page, you should set the `href` option as `#` (in new items you can just omit it). Check the [Short Configuration Example](#short-configuration-example-1) below for an example of its usage |
+| divider                   | Boolean | no        | Adds a divider line below the item |
 | new_item                  | Boolean | no        | Set this property to `true` to create a new item in the sidebar. If you use this property you need to provide an `icon` property and either a `href` or an `on_click` property |
 
 :::tip

docs/docs/03-configuration/03-themeable-configuration-options.mdx

@@ -42,7 +42,7 @@ These options are only useful if you plan to change the appareance of the sideba
 | notification_text_color<sup>\*</sup>  | String          | no       | Sets the color of the sidebar notifications texts |
 | notification_text_color_selected<sup>\*</sup>  | String | no       | Sets the color of the sidebar notification texts of the selected sidebar item |
 | notification_text_color_hover<sup>\*</sup>  | String    | no       | Sets the color of the sidebar notifications texts when the item is in hover state |
-| divider_color<sup>\*</sup>       | String               | no       | Sets the color of both sidebar dividers |
+| divider_color<sup>\*</sup>       | String               | no       | Sets the color of the sidebar dividers |
 | divider_top_color<sup>\*</sup>   | String               | no       | Sets the color of the top sidebar divider. It overrides `divider_color` for this divider if it is set |
 | divider_bottom_color<sup>\*</sup> | String              | no       | Sets the color of the bottom sidebar divider. It overrides `divider_color` for this divider if it is set |
 | scrollbar_thumb_color<sup>\*</sup>| String              | no       | Sets the color of the sidebar scrollbar (This option uses non-baseline CSS styles and it could not work in some browsers) |
@@ -100,6 +100,7 @@ These options are only useful if you plan to change the appareance of the sideba
 | notification_text_color<sup>\*</sup>  | String  | no       | Sets the color of the notification text (it overrides the root `notification_text_color` option) |
 | notification_text_color_selected<sup>\*</sup>  | String | no | Sets the color of the notification text when it is selected (it overrides the root `notification_text_color_selected` option) |
 | notification_text_color_hover<sup>\*</sup>  | String | no | Sets the color of the notifications text in hover state (it overrides the root `notification_text_color_hover` option) |
+| divider_color<sup>\*</sup> | String | no | Sets the color of the divider line below the item (it overrides the root `divider_color` option) |
 
 :::tip
 

src/checker.ts

@@ -3,7 +3,7 @@ import {
     NAMESPACE,
     MAX_ATTEMPTS,
     RETRY_DELAY
-} from '@constants';
+} from './constants/global';
 
 getPromisableResult(
     () => window.CustomSidebar,

src/constants/global.ts

@@ -0,0 +1,3 @@
+export const NAMESPACE = 'custom-sidebar';
+export const MAX_ATTEMPTS = 100;
+export const RETRY_DELAY = 50;

src/constants/index.ts

@@ -6,12 +6,10 @@ import{
     DockedSidebar
 } from '@types';
 
-export const NAMESPACE = 'custom-sidebar';
+export * from './global';
 export const LOCAL_PATH = '/local/';
 export const CONFIG_NAME = 'sidebar-config';
 export const CONFIG_PATH = `${LOCAL_PATH}${CONFIG_NAME}`;
-export const MAX_ATTEMPTS = 100;
-export const RETRY_DELAY = 50;
 export const FLUSH_PROMISE_DELAY = 1;
 export const BASE_NAME = 'base';
 
@@ -137,14 +135,15 @@ export const ITEM_TEMPLATE_COLOR_CONFIG_OPTIONS: ItemColorConfigKeys[] = [
     'notification_color_hover',
     'notification_text_color',
     'notification_text_color_selected',
-    'notification_text_color_hover'
+    'notification_text_color_hover',
+    'divider_color'
 ];
 
 export const ITEM_TEMPLATE_NUMBER_CONFIG_OPTIONS: ItemColorConfigKeys[] = [
     'selection_opacity'
 ];
 
-export const ITEM_TEMPLATE_STRING_CONFIG_OPTIONS: SidebarStringConfigKeys[] = [
+export const ITEM_STRING_CONFIG_OPTIONS: SidebarStringConfigKeys[] = [
     'default_path'
 ];
 
@@ -167,7 +166,8 @@ export const ITEM_OPTIONS_VARIABLES_MAP: [ItemColorConfigKeys, string][] = [
     ['notification_color_hover',         CUSTOM_SIDEBAR_CSS_VARIABLES.NOTIFICATION_COLOR_HOVER],
     ['notification_text_color',          CUSTOM_SIDEBAR_CSS_VARIABLES.NOTIFICATION_TEXT_COLOR],
     ['notification_text_color_selected', CUSTOM_SIDEBAR_CSS_VARIABLES.NOTIFICATION_TEXT_COLOR_SELECTED],
-    ['notification_text_color_hover',    CUSTOM_SIDEBAR_CSS_VARIABLES.NOTIFICATION_TEXT_COLOR_HOVER]
+    ['notification_text_color_hover',    CUSTOM_SIDEBAR_CSS_VARIABLES.NOTIFICATION_TEXT_COLOR_HOVER],
+    ['divider_color',                    CUSTOM_SIDEBAR_CSS_VARIABLES.DIVIDER_COLOR]
 ];
 
 export const SIDEBAR_OPTIONS_VARIABLES_MAP: [SidebarColorConfigKeys, string][] = [
@@ -177,7 +177,6 @@ export const SIDEBAR_OPTIONS_VARIABLES_MAP: [SidebarColorConfigKeys, string][] =
     ['sidebar_background',               CUSTOM_SIDEBAR_CSS_VARIABLES.BACKGROUND],
     ['menu_background',                  CUSTOM_SIDEBAR_CSS_VARIABLES.MENU_BACKGROUND],
     ['scrollbar_thumb_color',            CUSTOM_SIDEBAR_CSS_VARIABLES.SCROLLBAR_THUMB_COLOR],
-    ['divider_color',                    CUSTOM_SIDEBAR_CSS_VARIABLES.DIVIDER_COLOR],
     ['divider_top_color',                CUSTOM_SIDEBAR_CSS_VARIABLES.DIVIDER_TOP_COLOR],
     ['divider_bottom_color',             CUSTOM_SIDEBAR_CSS_VARIABLES.DIVIDER_BOTTOM_COLOR],
     ...ITEM_OPTIONS_VARIABLES_MAP
@@ -194,6 +193,7 @@ export enum ATTRIBUTE {
     ROLE = 'role',
     PROCESSED = 'data-processed',
     WITH_NOTIFICATION = 'data-notification',
+    WITH_DIVIDER = 'data-divider',
     ARIA_SELECTED = 'aria-selected',
     ARIA_DISABLED = 'aria-disabled',
     DISABLED = 'disabled',

src/custom-sidebar.ts

@@ -772,6 +772,7 @@ class CustomSidebar {
                     STYLES.SIDEBAR_EDITABLE,
                     STYLES.ITEM_BACKGROUND,
                     STYLES.ITEM_BACKGROUND_HOVER,
+                    STYLES.ITEM_DIVIDER_ITEM_DIVIDER_COLOR,
                     STYLES.ICON_COLOR,
                     STYLES.ICON_COLOR_SELECTED,
                     STYLES.ICON_COLOR_HOVER,
@@ -911,6 +912,10 @@ class CustomSidebar {
 
                     orderItem.element.style.order = `${orderIndex}`;
 
+                    if (orderItem.divider) {
+                        orderItem.element.setAttribute(ATTRIBUTE.WITH_DIVIDER, 'true');
+                    }
+
                     if (orderItem.name) {
                         this._subscribeName(
                             orderItem.element,

src/styles/index.ts

@@ -193,6 +193,18 @@ export const ITEM_BACKGROUND_HOVER = {
     }
 };
 
+export const ITEM_DIVIDER_ITEM_DIVIDER_COLOR = {
+    [`${ SELECTOR.HOST } ${ SELECTOR.ITEM }[${ ATTRIBUTE.WITH_DIVIDER }]`]: {
+        borderBottom: '1px solid',
+        borderBottomColor: getCSSVariables(
+            CUSTOM_SIDEBAR_CSS_VARIABLES.DIVIDER_COLOR,
+            HA_CSS_VARIABLES.DIVIDER_COLOR
+        ),
+        marginBottom: '10px',
+        paddingBottom: '10px'
+    }
+};
+
 export const ICON_COLOR = {
     [`${ SELECTOR.HOST } ${ ELEMENT.PAPER_ICON_ITEM } > :is(${ ELEMENT.HA_SVG_ICON }, ${ ELEMENT.HA_ICON })`]: {
         color: getCSSVariables(

src/types/index.ts

@@ -100,6 +100,7 @@ export interface ItemColorConfig {
     notification_text_color?: string;
     notification_text_color_selected?: string;
     notification_text_color_hover?: string;
+    divider_color?: string;
 }
 
 export interface SidebarColorConfig extends ItemColorConfig {
@@ -120,6 +121,7 @@ export interface ConfigItem extends ItemColorConfig {
     match?: `${Match}`;
     exact?: boolean;
     name?: string;
+    icon?: string;
     info?: string;
     notification?: string;
     order?: number;
@@ -128,14 +130,13 @@ export interface ConfigItem extends ItemColorConfig {
     href?: string;
     target?: '_self' | '_blank';
     on_click?: OnClickAction;
-    icon?: string;
+    divider?: boolean;
     new_item?: never;
 }
 
 export interface ConfigNewItem extends Omit<ConfigItem, 'new_item'> {
     new_item: boolean;
     item: string;
-    href: string;
     icon: string;
 }
 

src/validators/index.ts

@@ -16,7 +16,7 @@ import {
     SIDEBAR_MODE_TO_DOCKED_SIDEBAR,
     ITEM_TEMPLATE_COLOR_CONFIG_OPTIONS,
     ITEM_TEMPLATE_NUMBER_CONFIG_OPTIONS,
-    ITEM_TEMPLATE_STRING_CONFIG_OPTIONS,
+    ITEM_STRING_CONFIG_OPTIONS,
     JS_TEMPLATE_REG,
     JINJA_TEMPLATE_REG
 } from '@constants';
@@ -38,7 +38,7 @@ const BASE_CONFIG_OPTIONS = [
     'scrollbar_thumb_color',
     'styles',
     ...ITEM_TEMPLATE_COLOR_CONFIG_OPTIONS,
-    ...ITEM_TEMPLATE_STRING_CONFIG_OPTIONS
+    ...ITEM_STRING_CONFIG_OPTIONS
 ] as const;
 
 const ONLY_BASE_CONFIG_OPTIONS = [
@@ -427,6 +427,12 @@ const validateConfigItem = (configItem: ConfigItem): void => {
         `${ERROR_PREFIX} in ${configItem.item},`
     );
 
+    validateBooleanOptions(
+        configItem,
+        ['divider'],
+        `${ERROR_PREFIX} in ${configItem.item},`
+    );
+
     validateOnClickOption(
         configItem,
         `${ERROR_PREFIX} in ${configItem.item},`