juxscript 1.1.14 → 1.1.16

package/lib/components/hero.ts

@@ -1,4 +1,4 @@
-import { BaseComponent } from './base/BaseComponent.js';
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
 
 // Event definitions - Hero is display-only, but CTA button can trigger actions
 const TRIGGER_EVENTS = [] as const;
@@ -18,7 +18,7 @@ export interface HeroOptions {
   class?: string;
 }
 
-type HeroState = {
+type HeroState = BaseState & {
   title: string;
   subtitle: string;
   content: string;
@@ -28,8 +28,6 @@ type HeroState = {
   backgroundOverlay: boolean;
   variant: string;
   centered: boolean;
-  style: string;
-  class: string;
 };
 
 export class Hero extends BaseComponent<HeroState> {
@@ -71,7 +69,7 @@ export class Hero extends BaseComponent<HeroState> {
    */
   update(prop: string, value: any): void {
     const hero = document.getElementById(this._id);
-    if (!hero) return; // Component not mounted/rendered yet
+    if (!hero) return;
 
     switch (prop) {
       case 'title':
@@ -85,17 +83,17 @@ export class Hero extends BaseComponent<HeroState> {
         break;
 
       case 'content':
-        const contentEl = hero.querySelector('.jux-hero-body');
+        const contentEl = hero.querySelector('.jux-hero-body'); // ✅ BEM naming
         if (contentEl) contentEl.innerHTML = value;
         break;
 
       case 'cta':
-        const ctaEl = hero.querySelector('.jux-hero-cta') as HTMLElement;
+        const ctaEl = hero.querySelector('.jux-hero-cta') as HTMLElement; // ✅ BEM naming
         if (ctaEl) ctaEl.textContent = value;
         break;
 
       case 'ctaLink':
-        const ctaLinkEl = hero.querySelector('.jux-hero-cta') as HTMLAnchorElement;
+        const ctaLinkEl = hero.querySelector('.jux-hero-cta') as HTMLAnchorElement; // ✅ BEM naming
         if (ctaLinkEl) ctaLinkEl.href = value;
         break;
 
@@ -106,8 +104,7 @@ export class Hero extends BaseComponent<HeroState> {
         break;
 
       case 'centered':
-        if (value) hero.classList.add('jux-hero-centered');
-        else hero.classList.remove('jux-hero-centered');
+        hero.classList.toggle('jux-hero-centered', value); // ✅ BEM modifier
         break;
     }
   }
@@ -228,7 +225,6 @@ export class Hero extends BaseComponent<HeroState> {
       ctaButton.href = this.state.ctaLink;
       ctaButton.textContent = this.state.cta;
 
-      // ✅ Fire callback when CTA is clicked
       ctaButton.addEventListener('click', (e) => {
         this._triggerCallback('ctaClick', e);
       });
@@ -239,7 +235,7 @@ export class Hero extends BaseComponent<HeroState> {
     hero.appendChild(contentContainer);
 
     this._wireStandardEvents(hero);
-    this._wireAllSyncs(); // Use base method
+    this._wireAllSyncs();
 
     container.appendChild(hero);
     return this;

package/lib/components/sidebar.d.ts

@@ -1,5 +1,13 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { MenuOptions } from './menu.js';
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
+export interface SidebarItem {
+    label: string;
+    href?: string;
+    click?: () => void;
+    icon?: string;
+    items?: SidebarItem[];
+    active?: boolean;
+    itemClass?: string;
+}
 export interface SidebarOptions {
     position?: 'left' | 'right';
     width?: string;
@@ -7,42 +15,44 @@ export interface SidebarOptions {
     showToggle?: boolean;
     expandOnHover?: boolean;
     collapsed?: boolean;
-    menu?: MenuOptions;
+    items?: SidebarItem[];
+    header?: string;
+    footer?: string;
     style?: string;
     class?: string;
 }
-type SidebarState = {
+type SidebarState = BaseState & {
     position: 'left' | 'right';
     width: string;
     collapsible: boolean;
     showToggle: boolean;
     expandOnHover: boolean;
     collapsed: boolean;
-    menu: MenuOptions | null;
-    style: string;
-    class: string;
+    items: SidebarItem[];
+    header: string;
+    footer: string;
 };
 export declare class Sidebar extends BaseComponent<SidebarState> {
     private _sidebar;
-    private _menu;
     constructor(id: string, options?: SidebarOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
+    private _setActiveStates;
+    private _renderItem;
+    update(prop: string, value: any): void;
     width(value: string): this;
     position(value: 'left' | 'right'): this;
     collapsible(value: boolean): this;
     showToggle(value: boolean): this;
     expandOnHover(value: boolean): this;
     collapsed(value: boolean): this;
-    menu(value: MenuOptions): this;
+    items(value: SidebarItem[]): this;
+    addItem(item: SidebarItem): this;
+    header(value: string): this;
+    footer(value: string): this;
     toggle(): void;
-    /**
-     * Refresh menu active states (called automatically on URL changes)
-     */
-    refreshMenu(): this;
-    private _updateCollapsedState;
+    refreshActiveStates(): this;
     render(targetId?: string): this;
-    update(prop: string, value: any): void;
 }
 export declare function sidebar(id: string, options?: SidebarOptions): Sidebar;
 export {};

package/lib/components/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAQ,WAAW,EAAE,MAAM,WAAW,CAAC;AAO9C,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,OAAQ,SAAQ,aAAa,CAAC,YAAY,CAAC;IACtD,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,KAAK,CAAqB;gBAEtB,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB;IAwBpD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAiBhD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAKvC,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKjC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKhC,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKnC,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAM/B,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAK9B,MAAM,IAAI,IAAI;IAYd;;OAEG;IACH,WAAW,IAAI,IAAI;IAQnB,OAAO,CAAC,qBAAqB;IAU7B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAwH/B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;CAGvC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB,GAAG,OAAO,CAEzE"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAQnE,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,YAAY,GAAG,SAAS,GAAG;IAC9B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBAAa,OAAQ,SAAQ,aAAa,CAAC,YAAY,CAAC;IACtD,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB;IA4BpD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,WAAW;IA+FnB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAsCtC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAKvC,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKjC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKhC,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKnC,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK/B,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI;IAKjC,OAAO,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAKhC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK3B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK3B,MAAM,IAAI,IAAI;IAKd,mBAAmB,IAAI,IAAI;IAU3B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CA2FhC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB,GAAG,OAAO,CAEzE"}

package/lib/components/sidebar.js

@@ -1,9 +1,9 @@
 import { BaseComponent } from './base/BaseComponent.js';
 import { renderIcon } from './icons.js';
-import { Menu } from './menu.js';
+import { req } from './req.js';
 // Event definitions
 const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['toggle'];
+const CALLBACK_EVENTS = ['toggle', 'itemClick'];
 export class Sidebar extends BaseComponent {
     constructor(id, options = {}) {
         // Restore collapsed state from localStorage if available
@@ -17,15 +17,17 @@ export class Sidebar extends BaseComponent {
             showToggle: options.showToggle ?? false,
             expandOnHover: options.expandOnHover ?? false,
             collapsed: initialCollapsed,
-            menu: options.menu ?? null,
+            items: options.items ?? [],
+            header: options.header ?? '',
+            footer: options.footer ?? '',
             style: options.style ?? '',
             class: options.class ?? ''
         });
         this._sidebar = null;
-        this._menu = null;
-        // Listen for URL changes to update menu active states
+        this._setActiveStates();
+        // Listen for URL changes to update active states
         if (typeof window !== 'undefined') {
-            window.addEventListener('popstate', () => this.refreshMenu());
+            window.addEventListener('popstate', () => this.refreshActiveStates());
         }
     }
     getTriggerEvents() {
@@ -34,19 +36,138 @@ export class Sidebar extends BaseComponent {
     getCallbackEvents() {
         return CALLBACK_EVENTS;
     }
+    /* ═════════════════════════════════════════════════════════════════
+     * PRIVATE HELPERS
+     * ═════════════════════════════════════════════════════════════════ */
+    _setActiveStates() {
+        this.state.items = this.state.items.map(item => ({
+            ...item,
+            active: item.href ? req.isActiveNavItem(item.href) : false,
+            items: item.items?.map(subItem => ({
+                ...subItem,
+                active: subItem.href ? req.isActiveNavItem(subItem.href) : false
+            }))
+        }));
+    }
+    _renderItem(item) {
+        const itemEl = document.createElement('div');
+        itemEl.className = 'jux-sidebar-item';
+        if (item.itemClass) {
+            itemEl.className += ` ${item.itemClass}`;
+        }
+        if (item.active) {
+            itemEl.classList.add('jux-sidebar-item-active');
+        }
+        if (item.href) {
+            const link = document.createElement('a');
+            link.className = 'jux-sidebar-link';
+            link.href = item.href;
+            if (item.active) {
+                link.classList.add('jux-sidebar-link-active');
+            }
+            if (item.icon) {
+                const icon = document.createElement('span');
+                icon.className = 'jux-sidebar-icon';
+                icon.appendChild(renderIcon(item.icon));
+                link.appendChild(icon);
+            }
+            const label = document.createElement('span');
+            label.className = 'jux-sidebar-label';
+            label.textContent = item.label;
+            link.appendChild(label);
+            link.addEventListener('click', (e) => {
+                this._triggerCallback('itemClick', { item, event: e });
+            });
+            itemEl.appendChild(link);
+        }
+        else {
+            const button = document.createElement('button');
+            button.className = 'jux-sidebar-button';
+            button.type = 'button';
+            if (item.icon) {
+                const icon = document.createElement('span');
+                icon.className = 'jux-sidebar-icon';
+                icon.appendChild(renderIcon(item.icon));
+                button.appendChild(icon);
+            }
+            const label = document.createElement('span');
+            label.className = 'jux-sidebar-label';
+            label.textContent = item.label;
+            button.appendChild(label);
+            button.addEventListener('click', (e) => {
+                if (item.click) {
+                    item.click();
+                }
+                this._triggerCallback('itemClick', { item, event: e });
+            });
+            itemEl.appendChild(button);
+        }
+        if (item.items && item.items.length > 0) {
+            itemEl.classList.add('jux-sidebar-item-has-submenu');
+            const submenu = document.createElement('div');
+            submenu.className = 'jux-sidebar-submenu';
+            item.items.forEach(subItem => {
+                submenu.appendChild(this._renderItem(subItem));
+            });
+            itemEl.appendChild(submenu);
+            const clickTarget = itemEl.querySelector('a, button');
+            if (clickTarget) {
+                clickTarget.addEventListener('click', (e) => {
+                    if (!item.href) {
+                        e.preventDefault();
+                    }
+                    itemEl.classList.toggle('jux-sidebar-item-expanded');
+                });
+            }
+        }
+        return itemEl;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * REACTIVE UPDATE
+     * ═════════════════════════════════════════════════════════════════ */
+    update(prop, value) {
+        if (!this._sidebar)
+            return;
+        if (prop === 'collapsed') {
+            this._sidebar.classList.toggle('jux-sidebar-collapsed', value);
+            // Update toggle button state
+            const toggleBtn = this._sidebar.querySelector('.jux-sidebar-toggle');
+            if (toggleBtn) {
+                toggleBtn.classList.toggle('jux-sidebar-toggle-collapsed', value);
+            }
+            // Save to localStorage
+            const storageKey = `jux-sidebar-${this._id}-collapsed`;
+            localStorage.setItem(storageKey, String(value));
+        }
+        else if (prop === 'items') {
+            this._setActiveStates();
+            const nav = this._sidebar.querySelector('.jux-sidebar-nav');
+            if (nav) {
+                nav.innerHTML = '';
+                this.state.items.forEach(item => {
+                    nav.appendChild(this._renderItem(item));
+                });
+            }
+        }
+        else if (prop === 'header') {
+            const header = this._sidebar.querySelector('.jux-sidebar-header');
+            if (header)
+                header.textContent = value;
+        }
+        else if (prop === 'footer') {
+            const footer = this._sidebar.querySelector('.jux-sidebar-footer');
+            if (footer)
+                footer.textContent = value;
+        }
+    }
     /* ═════════════════════════════════════════════════════════════════
      * FLUENT API
      * ═════════════════════════════════════════════════════════════════ */
-    // ✅ Inherited from BaseComponent:
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - addClass(), removeClass(), toggleClass()
-    // - visible(), show(), hide()
-    // - attr(), attrs(), removeAttr()
-    // - disabled(), enable(), disable()
-    // - loading(), focus(), blur(), remove()
     width(value) {
         this.state.width = value;
+        if (this._sidebar) {
+            this._sidebar.style.width = value;
+        }
         return this;
     }
     position(value) {
@@ -67,64 +188,74 @@ export class Sidebar extends BaseComponent {
     }
     collapsed(value) {
         this.state.collapsed = value;
-        this._updateCollapsedState();
         return this;
     }
-    menu(value) {
-        this.state.menu = value;
+    items(value) {
+        this.state.items = value;
+        return this;
+    }
+    addItem(item) {
+        this.state.items = [...this.state.items, item];
+        return this;
+    }
+    header(value) {
+        this.state.header = value;
+        return this;
+    }
+    footer(value) {
+        this.state.footer = value;
         return this;
     }
     toggle() {
         this.state.collapsed = !this.state.collapsed;
-        this._updateCollapsedState();
-        // Save to localStorage
-        const storageKey = `jux-sidebar-${this._id}-collapsed`;
-        localStorage.setItem(storageKey, String(this.state.collapsed));
-        // 🎯 Fire the toggle callback event
         this._triggerCallback('toggle', this.state.collapsed);
     }
-    /**
-     * Refresh menu active states (called automatically on URL changes)
-     */
-    refreshMenu() {
-        if (this._menu && this.state.menu) {
-            // Re-evaluate and update menu items with current active states
-            this._menu.items(this.state.menu.items || []);
-        }
+    refreshActiveStates() {
+        this._setActiveStates();
+        this.state.items = [...this.state.items]; // Trigger update
         return this;
     }
-    _updateCollapsedState() {
-        if (this._sidebar) {
-            this._sidebar.classList.toggle('jux-sidebar-collapsed', this.state.collapsed);
-        }
-    }
     /* ═════════════════════════════════════════════════════════════════
      * RENDER
      * ═════════════════════════════════════════════════════════════════ */
     render(targetId) {
         const container = this._setupContainer(targetId);
-        const { position, collapsed, expandOnHover, menu, style, class: className } = this.state;
-        // Build sidebar element
+        const { position, collapsed, expandOnHover, items, header, footer, width, style, class: className } = this.state;
         const sidebar = document.createElement('aside');
+        sidebar.className = `jux-sidebar jux-sidebar-${position}`;
         sidebar.id = this._id;
+        if (collapsed) {
+            sidebar.classList.add('jux-sidebar-collapsed');
+        }
         if (className)
-            sidebar.className = className;
+            sidebar.className += ` ${className}`;
         if (style)
             sidebar.setAttribute('style', style);
-        // Apply initial collapsed state
-        if (collapsed) {
-            sidebar.classList.add('jux-sidebar-collapsed');
+        if (width)
+            sidebar.style.width = width;
+        if (header) {
+            const headerEl = document.createElement('div');
+            headerEl.className = 'jux-sidebar-header';
+            headerEl.textContent = header;
+            sidebar.appendChild(headerEl);
+        }
+        const nav = document.createElement('nav');
+        nav.className = 'jux-sidebar-nav';
+        items.forEach(item => {
+            nav.appendChild(this._renderItem(item));
+        });
+        sidebar.appendChild(nav);
+        if (footer) {
+            const footerEl = document.createElement('div');
+            footerEl.className = 'jux-sidebar-footer';
+            footerEl.textContent = footer;
+            sidebar.appendChild(footerEl);
         }
-        // Menu container (append first so toggle appears at bottom)
-        const menuContainer = document.createElement('div');
-        menuContainer.className = 'jux-sidebar-menu';
-        menuContainer.id = `${this._id}-menu`;
-        sidebar.appendChild(menuContainer);
-        // Toggle button (append last so it appears at bottom)
         if (this.state.collapsible || this.state.showToggle) {
             const toggleBtn = document.createElement('button');
             toggleBtn.className = 'jux-sidebar-toggle';
             toggleBtn.type = 'button';
+            toggleBtn.setAttribute('aria-label', 'Toggle sidebar');
             const toggleIcon = document.createElement('span');
             toggleIcon.className = 'jux-sidebar-toggle-icon';
             const chevronIcon = renderIcon(position === 'left' ? '➡️' : '⬅️');
@@ -135,11 +266,9 @@ export class Sidebar extends BaseComponent {
             }
             toggleBtn.addEventListener('click', () => {
                 this.toggle();
-                toggleBtn.classList.toggle('jux-sidebar-toggle-collapsed', this.state.collapsed);
             });
             sidebar.appendChild(toggleBtn);
         }
-        // Handle expand on hover
         if (expandOnHover) {
             sidebar.addEventListener('mouseenter', () => {
                 if (this.state.collapsed) {
@@ -152,48 +281,10 @@ export class Sidebar extends BaseComponent {
                 }
             });
         }
-        // Wire events using inherited method
         this._wireStandardEvents(sidebar);
-        // Wire sync bindings for 'collapsed' property
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'collapsed') {
-                const transform = toComponent || ((v) => v);
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    const isCollapsed = Boolean(transformed);
-                    this.state.collapsed = isCollapsed;
-                    this._updateCollapsedState();
-                });
-            }
-            else if (property === 'menu') {
-                const transform = toComponent || ((v) => v);
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    this.state.menu = transformed;
-                    // Update menu items if menu instance exists
-                    if (this._menu) {
-                        this._menu.items(transformed.items || []);
-                        // Re-render the menu
-                        const menuEl = menuContainer.querySelector(`#${this._id}-menu-instance`);
-                        if (menuEl) {
-                            menuEl.remove();
-                        }
-                        this._menu.render(`#${menuContainer.id}`);
-                    }
-                });
-            }
-        });
+        this._wireAllSyncs();
         container.appendChild(sidebar);
         this._sidebar = sidebar;
-        // Create and render menu (after sidebar is in DOM)
-        if (menu) {
-            this._menu = new Menu(`${this._id}-menu-instance`, {
-                ...menu,
-                orientation: 'vertical'
-            });
-            this._menu.render(`#${menuContainer.id}`);
-        }
-        // Trigger Iconify icon rendering
         requestAnimationFrame(() => {
             if (window.Iconify) {
                 window.Iconify.scan();
@@ -201,9 +292,6 @@ export class Sidebar extends BaseComponent {
         });
         return this;
     }
-    update(prop, value) {
-        // No reactive updates needed
-    }
 }
 export function sidebar(id, options = {}) {
     return new Sidebar(id, options);