juxscript 1.1.13 → 1.1.15

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,140 @@ 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);
+        }
+        // Handle sub-items
+        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);
+            // Toggle submenu expansion
+            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 +190,78 @@ 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;
+        // Header
+        if (header) {
+            const headerEl = document.createElement('div');
+            headerEl.className = 'jux-sidebar-header';
+            headerEl.textContent = header;
+            sidebar.appendChild(headerEl);
         }
-        // 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)
+        // Navigation
+        const nav = document.createElement('nav');
+        nav.className = 'jux-sidebar-nav';
+        items.forEach(item => {
+            nav.appendChild(this._renderItem(item));
+        });
+        sidebar.appendChild(nav);
+        // Footer
+        if (footer) {
+            const footerEl = document.createElement('div');
+            footerEl.className = 'jux-sidebar-footer';
+            footerEl.textContent = footer;
+            sidebar.appendChild(footerEl);
+        }
+        // Toggle button
         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 +272,10 @@ 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
+        // Expand on hover
         if (expandOnHover) {
             sidebar.addEventListener('mouseenter', () => {
                 if (this.state.collapsed) {
@@ -152,48 +288,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();