Custom Left Vertical Navigation

Shift page to the right. Disappears for mobile view.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
    <div class="topbar"></div>
  <div class="navback leftnav">
<div class="navbar">
  <div class="item hvr-shrink">
 
    <div>
        <img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
      <div class="label">Home</div>
    </div>
  
  </div>

  <div class="item hvr-shrink">

    <div>
      <img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
      <div class="label">Central</div>
    </div>
  
  </div>
  
  <div class="item hvr-shrink">
   
    <div>
      <img src="https://png.icons8.com/ios/35/ffffff/chat.png">
      <div class="label">Questions</div>
    </div>
  
  </div>

  <div class="item hvr-shrink">
    <div>
      <img src="https://png.icons8.com/ios/35/ffffff/trust.png">
      <div class="label">Resources</div>
    </div>
  
  </div>

  <div class="item hvr-shrink">
    
    <div>
      <img src="https://png.icons8.com/ios/35/ffffff/overtime.png">
      <div class="label">Events</div>
    </div>
  
  </div>

  <div class="item hvr-shrink">
  
    <div>
      <img style="height: 40px; width:40px;" src="https://community.canopytax.com/cfs-filesystemfile/__key/communityserver-components-sitefiles/Assets/Canopy-White-Emblem-Circle-100x100.png?_=636602351023702639">
      <div class="label">Canopy</div>
    </div>
  
  </div>
  <hr />
</div>
</div>

</body>

CSS

@media all and (min-width:670px) {
 
body {
  padding-left: 100px;
}
 
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.navback {
  position: fixed;
  top: 0;
  left: 0px;
  width: 100px;
  height: 100%;
  background: #283237;
  z-index: 4;
}

.navbar {
  position: fixed;
  top: 44px;
  left: 0px;
  width: 100px;
  height: 60vh;
  background: #283237;
  display: flex;
  z-index: 5;
  flex-direction: column;
}

.topbar {
  border-top: 1px solid #000;
  top: 44px;
}

.navbar .item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-top: 40px;
  padding-bottom: 40px;
  max-height: 100px;
  z-index: 5;
}
 
.navbar .item div.label {
  color: #fff;
  position: relative;
  top: 5px;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Segoe UI", sans-serif;
  transition: all 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
  left: -100px;
}

.navbar:hover .item .label {
  left: 0px;
}

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  }

.leftnav a {
  text-decoration: none;
}

.leftnav a:hover {
  color: #fff;
  text-decoration: none;
}

/* Shrink */
.hvr-shrink {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.item.active {
  background-color: red;
}

JavaScript

$('.item').click(function(){
    $('.item.active').removeClass("active");
    $(this).addClass('active');
})