SOURCE

const navLinks = document.querySelectorAll('.nav-link');
const slide = document.querySelector('.slide');


navLinks.forEach((link) => link.addEventListener('click', handleClick));


function handleClick () {
  const index = parseInt(this.dataset.index);
  slide.style.transform = `translateX(${index * 100}%)`;
  navLinks.forEach(link => link.classList.remove('active'));
  this.classList.add('active');
}

<div class="container">
  <div class="phone-bottom">
    <nav class="nav">
      <div class="slide"></div>
      <a href="#" class="nav-link active" data-index="0">
        <i class="material-icons md-18">signal_cellular_alt</i>
        <span class="nav-text">Stats</span>
      </a>
      <a href="#" class="nav-link" data-index="1">
        <i class="material-icons md-18">mail_outline</i>
        <span class="nav-text">Inbox</span>
      </a>
      <a href="#" class="nav-link" data-index="2"><i class="material-icons md-18">search</i>
        <span class="nav-text">Find</span></a>
    </nav>
  </div>
</div>

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: Roboto;
}

.container {
  padding-top: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.phone-bottom {
  width: 400px;
  background-color: #4E3CC8;
  height: 60px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 10px 15px;
  box-shadow: 0px 4px 6px #4E3CC8;
  .nav {
    color: #fff;
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    .slide {
      width: calc(100% / 3);
      height: 100%;
      content: '';
      position: absolute;
      background-color: rgba(255, 255, 255, 0.15);
      z-index: 2;
      top: 0;
      border-radius: 4px;
      transform: translateX(0%);
      transition: transform 350ms ease;
    }
    &-link {
      color: #fff;
      text-decoration: none;
      flex: 1;
      display: flex;
      align-items: center;
      height: 100%;
      justify-content: center;
      position: relative;
      &.active .nav-text{
        opacity: 1;
      }
      &.active i{
        transform: translateX(0%);
      }
    }
   
    &-text {
      text-decoration: none;
      padding-left: 10px;
      display: block;
      font-size: 1.6rem;
      opacity: 0;
       transition: opacity 350ms  ease 100ms;
    }
    i {
      color: #fff;
      transform: translateX(80%);
      transition: transform 350ms ease;
    }
  }
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}