JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="nav-container">
  <ul class="nav">
    <li class="active">
      <a href="#">
        <span id="teste" class="icon-home"></span>
        <span class="text">home</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span id="teste" class="icon-user"></span>
        <span class="text">sobre</span>
      </a>
      </li>
    <li>
      <a href="#">
        <span id="teste" class="icon-headphones"></span>
        <span class="text">áudio</span>
      </a>
      </li>
    <li>
      <a href="#">
        <span id="teste" class="icon-picture"></span>
        <span class="text">portfolio</span>    
      </a>
    </li>
    <li>
      <a href="#">
        <span id="teste" class="icon-facetime-video"></span>
		<span class="text">vídeo</span>
      </a>
    </li>
  </ul>
</div>

CSS

*{
  box-sizing: border-box;
}

body {
	background: -moz-radial-gradient(center, ellipse cover, rgba(134,128,255,1) 0%, rgba(0,0,0,1) 100%); /* ff3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(134,128,255,1)), color-stop(100%, rgba(0,0,0,1))); /* safari4+,chrome */
	background:-webkit-radial-gradient(center, ellipse cover, rgba(134,128,255,1) 0%, rgba(0,0,0,1) 100%); /* safari5.1+,chrome10+ */
	background: -o-radial-gradient(center, ellipse cover, rgba(134,128,255,1) 0%, rgba(0,0,0,1) 100%); /* opera 11.10+ */
	background: -ms-radial-gradient(center, ellipse cover, rgba(134,128,255,1) 0%, rgba(0,0,0,1) 100%); /* ie10+ */
	background:radial-gradient(ellipse at center, rgba(134,128,255,1) 0%, rgba(0,0,0,1) 100%); /* w3c */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#8680FF, endColorstr='#000000',GradientType=1 ); /* ie6-9 */
}
.nav-container{
  width:300px;
  margin-top:10px;
  transition: all 0.3s linear;
}
.nav{
  list-style-type:none;
  margin:0;
  padding:0;
}

li{
  height:46px; 
  position:relative;
}

a {
  text-decoration:none;
  display:block;
  height:100%;
  width:100%;
  line-height:46px;
  color:#bbb;
  text-transform: uppercase;
  font-weight: bold;
  padding-left:25%;
  border-left:5px solid transparent;
  letter-spacing:1px;
  transition: all 0.3s linear;
}
.active a{
  color: #FFF;
  background-color: #8680FF;
  outline:0;
}

.activeTeste {
	background-color: rgba(0,0,0,0.9);
}

li:not(.active):hover a{
  color: #eee;
  background-color: #8680FF;
}
span[class ^= "icon"]{
  position:absolute;
  left:0px;
  font-size: 1.5em;
  transition: all 0.3s linear;
}

#teste {
	width: 60px;
}

#teste:hover{
	background-color: rgba(0,0,0,0.6);
	width: 60px;
}

JavaScript

$('li').click(function(){
  $(this).addClass('active')
       .siblings()
       .removeClass('active');
});