app-route-04.js

import HyperHTMLElement from 'hyperhtml-element/esm';
import Search from "./search";
const {hyper, Component} = HyperHTMLElement;

class Tabs extends Component {
  get defaultState() {
    return {
      path: ""
    }
  }
  renderClass(path) {
    if (this.state.path === path) {
      return "active";
    }
  }
  update(state) {
    this.setState({path: state.path, coin: state.coin});
    return this.render();
  }
  render() {
    return this.html`
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
          <a 
            class="${`nav-link ${this.renderClass('/')}`}" 
            href="/" 
            role="tab" 
            aria-controls="compare" 
            aria-selected="true">Compare</a>
        </li>
        <li class="nav-item">
          <a 
            class="${`nav-link ${this.renderClass('/info')}`}" 
            href="/info" 
            role="tab" 
            aria-controls="info" 
            aria-selected="false">Information</a>
        </li>
      </ul>
    `;
  }
}

export default Tabs;