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:

itemsMainLab: Will be the root items container.
itemsLab: Will be the others items container.
sidenavLab: This is the component itself that will contain itemsMainLab and itemsLab.

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:

data-ref: Is the container identifier.
data-parent: Is the parent container identifier.

There is an attribute just for the items:

data-open: Is the container identifier that will be open when click the ite.

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:

width: Is the sidenav´s width.
height: Is the sidenav´s height.
expand: This function is for open(show) an itemsLab.

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

TheRogerLAB Codes

info@therogerlab.com