dees-appui-catalog/ts_web/elements/deap-maincontent.ts

import * as interfaces from './interfaces';

import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';

import * as domtools from '@designestate/dees-domtools';

@customElement('deap-maincontent')
export class DeapMaincontent extends DeesElement {
  public static demo = () => html`<deap-maincontent></deap-maincontent>`;

  // INSTANCE
  @property()
  public tabs: interfaces.tab[] = [
    {key: 'option 1', action: () => {alert('hello')}},
    {key: 'a very long option', action: () => {}},
    {key: 'option 3', action: () => {}},
    {key: 'option 4', action: () => {}}
  ];

  @property()
  public selectedTab = null;

  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        :host {
          color: #fff;
          display: block;
          width: 100%;
          height: 100%;
          position: relative;
          background: #222222;
        }
        .maincontainer {
          position: absolute;
          height: 100%;
          right: 0px;
          top: 0px;
          width: 100%;  
        }

        .topbar {
          position: absolute;
          width: 100%;
          height: 120px;
          background: #101010;
          user-select: none;
        }

        .topbar .heading {
          padding: 30px 50px 25px 50px;
          font-family: Roboto Mono;
          font-size: 25px;
        }

        .topbar .tabsContainer {
          display: grid;
          margin-left: 50px;
          grid-template-columns: repeat(${this.tabs.length}, min-content)
        }

        .topbar .tabsContainer .tab {
          color: #a0a0a0;
          white-space: nowrap;
          margin-right: 20px;
          cursor: pointer;
        }

        .topbar .tabIndicator {
          position: absolute;
          left: 50px;
          bottom: 0px;
          height: 4px;
          width: 50px;
          background: #484848;
          transition: all 0.3s;
        }


        .mainicon {}
      </style>
      <div class="maincontainer">
        <div class="topbar">
          <div class="heading">lossless.com</div>
          <div class="tabsContainer">
            ${this.tabs.map(tabArg => {
              return html`
                <div class="tab" @click="${() => {this.selectedTab = tabArg; this.updateIndicator(); tabArg.action()}}">${tabArg.key}</div>
              `;
            })}
          </div>
          <div class="tabIndicator"></div>
        </div>
      </div>
    `;
  }

  firstUpdated() {
    this.updateIndicator();
  }

  /**
   * updates the indicator
   */
  private updateIndicator() {
    let selectedTab = this.selectedTab;
    if (!selectedTab) {
      selectedTab = this.tabs[0];
    }
    const tabIndex = this.tabs.indexOf(selectedTab);
    const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(`.tabsContainer .tab:nth-child(${tabIndex + 1})`);
    const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
    tabIndicator.style.width = selectedTabElement.clientWidth + 'px';
    tabIndicator.style.left = selectedTabElement.offsetLeft + 'px';
  }
}