(function() {
  var GlassSurface = window.GlassSurface;

  function GlassSidebar(props) {
    var items = props.items || [];
    var activeIndex = props.activeIndex;
    var onSelect = props.onSelect;
    var className = props.className || '';
    var header = props.header;

    return React.createElement(GlassSurface, {
      elevation: 1,
      radius: 'md',
      tone: 'adaptive',
      className: 'glass-sidebar ' + className
    },
      header,
      items.map(function(it, i) {
        return React.createElement('button', {
          key: it.label || i,
          type: 'button',
          className: 'glass-sidebar-item' + (activeIndex === i ? ' act' : ''),
          onClick: function() { if (onSelect) onSelect(i); }
        },
          it.icon && React.createElement('span', { style: { width: 18, display: 'flex', alignItems: 'center' } }, it.icon),
          it.label
        );
      })
    );
  }

  window.GlassSidebar = GlassSidebar;
})();