<div class="container d-flex flex-column flex-1 align-items-center justify-content-center">
  <nav>
    <ul>
      <li>
        <a onclick="addClass(0)" href="#" class="d-flex justify-content-center align-items-center link isActive">
          <i class="material-icons-outlined">home</i>
          <span>home</span>
        </a>
      </li>
      <li>
        <a onclick="addClass(1)" href="#" class="d-flex justify-content-center align-items-center link">
          <i class="material-icons-outlined">search</i>
          <span>search</span>
        </a>
      </li>
      <li>
        <a onclick="addClass(2)" href="#" class="d-flex justify-content-center align-items-center link">
          <i class="material-icons-outlined">notifications</i>
          <span>notifications</span>
        </a>
      </li>
      <li>
        <a onclick="addClass(3)" href="#" class="d-flex justify-content-center align-items-center link">
          <i class="material-icons-outlined">settings</i>
          <span>settings</span>
        </a>
      </li>
    </ul>
  </nav>
</div>
<script>
  function addClass(elem) {
    for (let i = 0; i < elem.length; i++) {
      elem[i].addEventListener("click", function(e) {
        const current = this;
        for (let i = 0; i < elem.length; i++) {
          if (current !== elem[i]) {
            elem[i].classList.remove("isActive");
            elem[i].classList.add("notActive");
          } else {
            current.classList.add("isActive");
            current.classList.remove("notActive");
          }
        }
        e.preventDefault();
      });
    }
  }
  addClass(document.querySelectorAll(".link"));
</script>

/*
-- Design based on -> https://dribbble.com/shots/5605168-Toolbar-icons-animation
*/

* {
  padding: 0;
  margin: 0;
}

/*
-- Values
*/
$container-margin: 10px;
$nav-width: 100%;
$nav-max-width: 480px;
$nav-list-item-width: 25%;
$nav-padding: 20px;
$nav-border-radius: 30px;
$nav-link-margin: 10px;
$nav-link-height: 80px;
$nav-link-width: 100%;
$nav-icon-size: 32px;
$nav-circle-size: 5px;
$nav-circle-radius: 50%;
$nav-link-font-size: 14px;
$nav-link-font-weight: 500;
$nav-link-text-z-index: 1;
$nav-link-text-mask-z-index: 2;
$nav-icon-z-index: 3;
$nav-icon-mask-z-index: 4;

/*
-- Colors
*/

$body-background-color: #fff;
$container-background-color: #3f51b5;
$nav-background-color: #fff;
$nav-icon-color: #7986cb;
$nav-link-text-color: #1a237e;

html {
  height: 100%;
}

body {
  background-color: $body-background-color;
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: "Roboto", sans-serif;
}

.d-flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.align-items-center {
  align-items: center;
}
.justify-content-center {
  justify-content: center;
}
.flex-1 {
  flex-grow: 1;
}

.container {
  background-color: $container-background-color;
  margin: $container-margin;
}

/*
-- Nav
*/

nav {
  width: $nav-width;
  max-width: $nav-max-width;
  background-color: $nav-background-color;
  border-bottom-left-radius: $nav-border-radius;
  border-bottom-right-radius: $nav-border-radius;

  ul {
    list-style-type: none;
    padding: $nav-padding;
  }

  li {
    display: inline-flex;
    width: $nav-list-item-width;
    //remove li spacing
    margin-right: -4px;
  }

  a {
    height: $nav-link-height;
    width: $nav-link-width;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    margin-right: $nav-link-margin;
    margin-left: $nav-link-margin;

    &:hover {
      i {
        transition: all 0.4s;
        color: $nav-link-text-color;
      }
    }

    i {
      position: absolute;
      z-index: $nav-icon-z-index;
      &:after {
        content: "";
        background-color: $nav-background-color;
        position: absolute;
        transform: rotate(15deg);
        right: 0;
        bottom: 0;
        left: -5px;
        height: 1px;
        z-index: $nav-icon-mask-z-index;
      }
    }

    span {
      color: $nav-link-text-color;
      font-size: $nav-link-font-size;
      font-weight: $nav-link-font-weight;
      z-index: $nav-link-text-z-index;
      transform: translateY(20px);
      position: relative;
      &:first-letter {
        text-transform: capitalize;
      }
      &:after {
        content: "";
        background-color: $nav-link-text-color;
        position: absolute;
        height: $nav-circle-size;
        width: $nav-circle-size;
        border-radius: $nav-circle-radius;
        display: flex;
        left: calc(50% - #{$nav-circle-size / 2});
        top: 30px;
        transform: scale(0);
        opacity: 0;
      }
    }

    &:after {
      content: "";
      background-color: $nav-background-color;
      position: absolute;
      transform: rotate(15deg);
      right: -2px;
      bottom: -14px;
      left: -8px;
      height: 50px;
      z-index: $nav-link-text-mask-z-index;
    }
  }

  @mixin onClick(
    $translateIcon,
    $IconMaskHeight,
    $translateSpan,
    $scaleCircle,
    $linkMaskHeight
  ) {
    i {
      transform: translateY($translateIcon);
      transition: all 0.8s;
      &:after {
        transition: all 0.6s;
        height: $IconMaskHeight;
      }
    }

    span {
      transform: translateY($translateSpan);
      transition: all 0.4s ease-in;
      &:after {
        transition: all 0.8s ease;
        transform: scale($scaleCircle);
        opacity: 1;
      }
    }
    &:after {
      height: $linkMaskHeight;
      transition: height 1s;
    }
  }

  //onClick
  a.isActive {
    @include onClick(-40px, $nav-icon-size, 0, 1, 10px);
  }

  //onClick other links
  a.notActive {
    @include onClick(0, 1px, 20px, 0, 50px);
  }

  .material-icons-outlined {
    color: $nav-icon-color;
    font-size: $nav-icon-size;
  }
}