Web Components v1 / diffHTML v1 integration

devtools-navigation.js

import { html } from 'diffhtml';
import { ReactiveElement } from 'diffhtml-components';

class DevtoolsNavigation extends ReactiveElement {
  styles(props, state) {
    return html`
      <style>
        :host {
          display: flex;
          height: 100%;
          flex-basis: 200px;
          flex: none;
          background-color: #F3F3F3;
          border: 0;
          border-right: 1px solid rgb(64%, 64%, 64%);
          box-sizing: border-box;
          user-select: none;
        }

        ol {
          margin: 0;
          list-style: none;
          padding: 0;
          width: 250px;
        }

        ol li {
          width: 100%;
          height: 40px;
          background-color: #DDDDDD;
          padding: 20px;
          box-sizing: border-box;
          color: #333;
          line-height: 2px;
          cursor: pointer;
        }

        ol li:hover {
          background-color: #B4B4B4;
        }

        ol li[selected='true'] {
          background-color: #3879D9;
          color: #FFF;
        }
      </style>
    `;
  }

  render() {
    const { nav } = this.state;

    return html`
      ${this.styles(this.props, this.state)}

      <div class="navigation">
        <ol>
          ${nav.map(item => html`
            <li selected=${item.selected}>
              ${item.label}
              ${item.subLabel && html`<span class="faded">${item.subLabel}</span>`}
            </li>
          `)}
        </ol>
      </div>
    `;
  }

  constructor() {
    super();

    this.state = {
      nav: [
        { label: 'Mounts' },
        { label: 'Transactions', selected: true },
        { label: 'Flow Tasks', subLabel: '(Middleware)' },
      ],
    };
  }
}

customElements.define('devtools-navigation', DevtoolsNavigation);