|
- import { h, Component } from 'preact';
-
- class WBNavbar extends Component {
- render({ title, items, rhs, onItemClicked, onTitleClicked }) {
- return (
- <nav class="navbar navbar-expand-lg navbar-light bg-light">
- <a class="navbar-brand" href="#" onclick={ e => { e.preventDefault(); onTitleClicked(); } }>{ 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" />
- );
-
- else if (typeof(d) === 'object' && d['name'])
- return (
- <a class="dropdown-item" href="#" onclick={ e => { e.preventDefault(); onItemClicked(d); } }>{ d['name'] }</a>
- );
- }) }
- </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': () => {},
- 'onTitleClicked': () => {}
- }
-
- export default WBNavbar;
|