Sidebar

Summary

A drag-to-resize panel, ported from AUI 5.4's experimental ui.sidebar jQuery-UI widget without the jQuery UI + Underscore dependencies. A 15px grab handle sits on the panel's right edge; dragging resizes within min/max bounds and the width persists per id in localStorage.

The handle is a focusable role="separator": ←/→ resize by 10px (Shift: 50px), Home/End jump to min/max.

Example

JavaScript API

const sb = Neura.sidebar('#nav', {
  id: 'main-nav',                       // required - persistence key
  minWidth: 120,                        // number or fn(instance) => number; default 50
  maxWidth: () => window.innerWidth / 2,// default: window.innerWidth
  localStorageKey: 'my.nav.width',      // default: 'neura.sidebar.<id>'
  onResize: (width, sb) => {},          // 'resize' also accepted (AUI-era alias)
});
sb.setWidth(300);                       // clamped to min/max
sb.updatePosition();                    // re-clamp after layout changes
sb.destroy();                           // remove the handle (width stays as-is)
el.addEventListener('neura-sidebar-resize', e => e.detail.width);

Neura.sidebar() returns the same instance for the same element. Binding adds neura-sidebar-resizable to the element and appends a neura-sidebar-handle child (the CSS-drawn grip). The bubbling neura-sidebar-resize CustomEvent fires on every width change (drag steps, arrow keys, and programmatic setWidth() alike) with e.detail.width as the clamped pixel width.

AUI compatibility

AJS.$('.sidebar').sidebar({ id: 'issue-nav', minWidth: () => 50 });
AJS.$('.sidebar').sidebar('updatePosition');
// Widths persisted by AUI carry over - the shim keeps the
// "ui.sidebar.<id>" localStorage key format.