wba/frontend/src/js/widget/wb-navbar.js

import { h, Component } from 'preact';

class WBNavbar extends Component {
  render({ title, items, rhs, onItemClicked }) {
    return (
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">{ title }</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">

            { items.map(i => {
              if (typeof(i) === 'string')
                return (
                  <li class="nav-item">
                    <a class="nav-link" href="#">{ i }</a>
                  </li>
                );

              else if (typeof(i) === 'object')
                var li_cls = ['nav-item'];
                if (i['active'])
                  li_cls.push('active');
                var a_cls = ['nav-link'];
                if (i['disabled'])
                  a_cls.push('disabled');

                if ('dropdown' in i) {
                  li_cls.push('dropdown');
                  a_cls.push('dropdown-toggle');

                  li_cls = li_cls.join(' ');
                  a_cls = a_cls.join(' ');

                  return (
                    <li class={ li_cls }>
                      <a class={ a_cls } href="#" id={ i['name'].replace(' ', '-').toLowerCase() + '-dropdown' }
                        role="button" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">{ i['name'] }</a>
                      <div class="dropdown-menu" aria-labelledby={ i['name'].replace(' ', '-').toLowerCase() + '-dropdown' }>
                        { i['dropdown'].map(d => {
                          if (typeof(d) === 'string')
                            return (
                              <a class="dropdown-item" href="#" onclick={ e => { e.preventDefault(); onItemClicked(d); } }>{ d }</a>
                            );

                          else if (typeof(d) === 'object' && d['divider'])
                            return (
                              <div class="dropdown-divider" />
                            );
                        }) }
                      </div>
                    </li>
                  );
                } else {
                  li_cls = li_cls.join(' ');
                  a_cls = a_cls.join(' ');

                  return (
                    <li class={ li_cls }>
                      <a class={ a_cls } href="#" onclick={ e => { e.preventDefault(); onItemClicked(i); } }>{ i['name'] }</a>
                    </li>
                  );
                }

            }) }
          </ul>

          { rhs }
        </div>
      </nav>
    );
  }
}

WBNavbar.defaultProps = {
  'title': 'Workbench Advanced',
  'items': [],
  'form': null,
  'onItemClicked': () => {}
}

export default WBNavbar;