TheRogerLAB Codes

Side navigation web component

  June, 2021

Introduction

This component consists in a side navigation menu. Let's start by creating the structure of our web component. Create a file sidenavLab.js. Inside of it we will create three web components that will be integrated:

Step 1: Creating the itemsMainLab

class itemsMainLab extends HTMLElement {
  constructor () {
    super();
  }
  connectedCallback () {
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <style>
        .childrenWrapMain{
        width:100%;
        height:100%;
        position:absolute;
        float:left;
        left:0px;
        background-color:white;
        z-index:1;
        overflow:auto;
        }
      </style>
      <div class='childrenWrapMain'>
        <slot></slot>
      </div>`;
  }
}
window.customElements.define('itemsmain-lab', itemsMainLab);

Step 2: Creating the itemsLab

class itemsLab extends HTMLElement {
  constructor () {
    super();
  }
  /* Method for click the back item */
  goBack(){
    var t = this.getAttribute('data-parent');
    var todos = this.parentNode.querySelectorAll('[data-ref]');
    for(var i = 0; i < todos.length; i++){
      todos[i].style.display = 'none';
    }
    this.parentNode.querySelector('[data-ref='+t+']').style.display = 'block';
  }
  connectedCallback () {
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <style>
        .childrenWrap{
        width:100%;
        height:100%;
        position:absolute;
        float:left;
        left:0px;
        background-color:white;
        z-index:0;
        overflow:auto;
        }
      </style>
      <div class='childrenWrap'>
        <div id='closer'>
        <slot name='back'>
          <div>Back</div>
        </slot>
        </div>
        <slot></slot>
      </div>`;
    shadowRoot.querySelector('#closer').addEventListener('click', e => {
      this.goBack();
    });
  }
}
window.customElements.define('items-lab', itemsLab);

Both components have two attributes:

There is an attribute just for the items:

Step 3: Create the sidenavLab. Adding a constructor and getters

class sidenavLab extends HTMLElement {
  constructor () {
    super();
  }
  get width() {
    return this.hasAttribute('width');
  }
  get height() {
    return this.hasAttribute('height');
  }
  expand(e){
    if(e.target.dataset.open){
      var t = e.target.dataset.open;
      var todos = this.querySelectorAll('[data-ref]');
      for(var i = 0; i < todos.length; i++){
        todos[i].style.display = 'none';
      }
      this.querySelector('[data-ref='+t+']').style.display = 'block';
    }
  }
}
window.customElements.define('sidenav-lab', sidenavLab);

In this case we create two attributes and a function:

Step 4: Add a function connectedCallback

It fires when the component is created


class sidenavLab extends HTMLElement {
  //...previous code
  connectedCallback () {
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <style>
        .menu{
          position:relative;
          box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
        }
      </style>
      <div class='menu'>
        <slot></slot>
      </div>`;
    if(this.width){
      shadowRoot.querySelector('.menu').style.width = this.getAttribute('width');
    }
    if(this.height){
      shadowRoot.querySelector('.menu').style.height = this.getAttribute('height');
    }
    shadowRoot.addEventListener('click', e => {
      this.expand(e);
    });
  }
}
window.customElements.define('sidenav-lab', sidenavLab);

Check a working demo for this code:

SEE DEMO RATE THIS ARTICLE
4.5
27
TheRogerLAB Codes
Powered by TheRogerLAB Sandbox

info@therogerlab.com