feat: add custom width configuration for sidebar (#108)

Introduce a custom width setting for the sidebar, enhancing layout flexibility and responsiveness.

Author: ngocjohn

src/components/editor/forms/header-schema.ts

@@ -106,6 +106,13 @@ export const BASE_APPEARANCE_SCHEMA = memoizeOne((data: SidebarAppearanceConfig)
                 },
               },
             },
+            {
+              name: 'width',
+              label: 'Custom Width',
+              helper:
+                'Set a custom width for the sidebar, allows values with css units (e.g., 300px or 20%), or a number (which will be treated as pixels)',
+              type: 'string',
+            },
           ] as const,
         },
       ],

src/sidebar-css.ts

@@ -60,7 +60,7 @@ export const DIVIDER_ADDED_STYLE = css`
     padding: 0;
     box-sizing: border-box;
     margin: var(--divider-margin-radius);
-    width: 248px;
+    width: calc(100% - var(--ha-space-2));
   }
   :host(:not([expanded])) .divider[added] {
     margin: 0 !important;
@@ -75,6 +75,13 @@ export const DIVIDER_ADDED_STYLE = css`
     --mdc-icon-size: 20px !important;
   }
 
+  :host([expanded]) .menu {
+    width: 100% !important;
+  }
+  :host([expanded]) ha-md-list-item {
+    width: calc(100% - var(--ha-space-2)) !important;
+  }
+
   :host([expanded]) .grid-container > ha-md-list-item[grid-item] > ha-icon.badge,
   :host([expanded]) .grid-container > ha-md-list-item[grid-item] > span.badge {
     position: absolute;
@@ -124,16 +131,19 @@ export const DIVIDER_ADDED_STYLE = css`
   }
   :host([expanded]) .grid-container {
     display: grid;
-    grid-template-columns: repeat(auto-fill, calc(25% - 0px));
+    /* Use flexible minmax columns so grid items reflow with the available drawer width,
+     * which keeps the layout responsive when --custom-sidebar-width is changed. */
+    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
+    grid-gap: 4px 4px;
+    width: calc(100% - var(--ha-space-2));
     padding: 0;
     margin: 0;
     overflow: clip;
     /* max-height: fit-content; */
-    justify-content: center;
-    /* grid-gap: 4px 4px; */
+    /* justify-content: flex-start; */
   }
   :host([expanded]) .grid-container > ha-md-list-item[grid-item] {
-    width: 48px;
+    width: 48px !important;
     height: 48px;
     /* justify-content: center;
     align-items: center; */
@@ -296,6 +306,12 @@ export const DRAWER_STYLE = css`
   }
 `;
 
+export const HA_MAIN_CUSTOM_WIDTH_STYLE = css`
+  :host([expanded]:not([modal])) {
+    --mdc-drawer-width: var(--custom-sidebar-width, calc(256px + var(--safe-area-inset-left, 0px)));
+  }
+`;
+
 export const HUI_ROOT_STYLE = css`
   :host .header::before {
     content: '';

src/sidebar-organizer.ts

@@ -53,7 +53,7 @@ import { HAElement, HAQuerySelector, HAQuerySelectorEvent, OnListenDetail } from
 import { HomeAssistantStylesManager } from 'home-assistant-styles-manager';
 
 import { SoGroupDivider } from './components/so-group-divider';
-import { DIVIDER_ADDED_STYLE, DRAWER_STYLE, HUI_ROOT_STYLE } from './sidebar-css';
+import { DIVIDER_ADDED_STYLE, DRAWER_STYLE, HA_MAIN_CUSTOM_WIDTH_STYLE, HUI_ROOT_STYLE } from './sidebar-css';
 
 export class SidebarOrganizer {
   constructor() {
@@ -245,9 +245,8 @@ export class SidebarOrganizer {
     let ticking = false;
     let lastScrollY = window.scrollY;
     let currentOffset = 0;
-
-    // NEW
     let accumulatedDelta = 0;
+
     const threshold = maxHide; // Minimum scroll delta before reacting, this helps to prevent jitter on small scrolls. Defaults to header height;
 
     const updateHeaderVisibility = () => {
@@ -543,6 +542,9 @@ export class SidebarOrganizer {
     this._pinnedGroups = normalizePinnedGroups(pinned_groups || {});
     // Initialize collapsed groups based on config, this will be used to set initial state of groups and manage collapse/expand functionality
     this.collapsedItems = getCollapsedItems(custom_groups, default_collapsed);
+
+    // Setup custom sidebar width
+    this._addCustomWidthStyle();
     // Setup additional styles based on color config
     this._addAdditionalStyles(color_config);
 
@@ -574,14 +576,14 @@ export class SidebarOrganizer {
             beforeSpacerContainer.appendChild(newItemEl);
           }
         });
-        console.log('New items added to sidebar:', new_items);
+        console.debug('New items added to sidebar:', new_items);
       }
 
       if (move_settings_from_fixed === true) {
         const settingsItem = sidebarShadowRoot.querySelector(SELECTOR.SETTINGS_ITEM) as SidebarPanelItem;
         if (settingsItem) {
           beforeSpacerContainer.appendChild(settingsItem);
-          console.log('Settings item moved from fixed:', move_settings_from_fixed);
+          console.debug('Settings item moved from fixed:', move_settings_from_fixed);
         } else {
           console.log(
             '%cSIDEBAR-ORGANIZER:%c ❌ Settings item not found',
@@ -734,7 +736,11 @@ export class SidebarOrganizer {
             this._panelsList.insertBefore(haMdList, spacer.nextElementSibling);
           }
           //success
-          console.log('%cSIDEBAR-ORGANIZER:%c ✅ Bottom items added to sidebar', 'color: #bada55;', 'color: #40c057;');
+          console.debug(
+            '%cSIDEBAR-ORGANIZER:%c ✅ Bottom items added to sidebar',
+            'color: #bada55;',
+            'color: #40c057;'
+          );
         }
         console.groupEnd();
       });
@@ -1118,6 +1124,23 @@ export class SidebarOrganizer {
     });
   }
 
+  private _addCustomWidthStyle(): void {
+    if (!this._config.width) return;
+    Promise.all([this._haMain.element as Promise<HTMLElement>]).then((elements) => {
+      const [haMain] = elements;
+      const { width } = this._config!;
+      const customWidth = this._store._utils.CONFIG._computeWidth(width);
+      if (!customWidth) {
+        console.debug('❌ Invalid custom width, skipping applying custom width style:', width);
+        return;
+      }
+      haMain.style.setProperty('--custom-sidebar-width', customWidth);
+      console.debug('Custom sidebar width applied:', customWidth);
+
+      this._styleManager.addStyle([HA_MAIN_CUSTOM_WIDTH_STYLE.toString()], haMain.shadowRoot!);
+    });
+  }
+
   private _addAdditionalStyles(color_config: SidebarConfig['color_config'], mode?: string) {
     mode = mode ? mode : this.darkMode ? 'dark' : 'light';
     const customTheme = color_config?.custom_theme?.theme || undefined;

src/types/index.ts

@@ -124,6 +124,7 @@ export interface SidebarAppearanceConfig {
   text_transformation?: TextTransformation;
   move_settings_from_fixed?: boolean;
   force_transparent_background?: boolean;
+  width?: number | string;
 }
 export const AppearanceConfigKeys = [
   'header_title',
@@ -133,6 +134,7 @@ export const AppearanceConfigKeys = [
   'text_transformation',
   'move_settings_from_fixed',
   'force_transparent_background',
+  'width',
 ] as const;
 
 export interface SidebarColorConfig {

src/utilities/configs/validators.ts

@@ -215,3 +215,27 @@ export const _changeStorageConfig = (config: SidebarConfig): void => {
     setStorage(STORAGE.UI_CONFIG, config);
   }
 };
+
+const ALLOWED_UNITS = ['%', 'em', 'ex', 'px', 'rem', 'vh', 'vmax', 'vmin', 'vw'];
+const WIDTH_REGEX = new RegExp(`^\\s*(\\d+(\\.\\d+)?)(\\s*(${ALLOWED_UNITS.join('|')})?)\\s*$`);
+
+export const _computeWidth = (width?: number | string): string | undefined => {
+  if (width == null) return undefined;
+  // check if width has units, if not parse it as number and add 'px' unit, if it has units, validate the unit and return the value with unit
+
+  const normalizedWidth = typeof width === 'string' ? width.trim() : String(width);
+  const match = WIDTH_REGEX.exec(normalizedWidth);
+  if (!match) {
+    console.warn(
+      `%cVALIDATORS:%c Invalid width value "${width}". Please provide a valid CSS size (e.g. "250px", "20%", "15em").`,
+      'color: #ff9800;',
+      'color: #ff5722;'
+    );
+    return undefined;
+  }
+
+  const value = match[1];
+  const unit = match[4] || 'px'; // default to 'px' if no unit is provided
+
+  return `${value}${unit}`;
+};