Wysuwane boczne menu - zamiana elementu po wysunięciu

Witam! Mam problem z wysuwanym bocznym menu, otóż działa ono poprawnie, ale chciałbym uzyskać efekt: przed rozwinięciem np strzałka w prawo, po rozwinięciu zamienia się ona w strzałkę w lewo. Próbowałem podmieniać to w klasie visible, ale niestety nie działa. Proszę o pomoc.
Dokładnie chodzi mi o taki efekt: http://imgur.com/a/IGHoy
U mnie wygląda to tak: http://imgur.com/a/fYYc9

Mój kod:

część z HTMLa:
    <div class="sidebar-btn">
        <span class="glyphicon glyphicon-triangle-right" style="padding-bottom: 20px" ></span>
        menu
    </div>

Bootstrap.css: 

#sidebar {
  background: white;
  width: 200px;
  height: 100%;
  display: block;
  position: absolute;
  left: -160px;
  top: 50px;
  transition: left 0.3s linear;
}

ul li {
  list-style: none;
}

ul li a {
  color: #053e62;
  display: block;
  padding-bottom: 10px;
}

#sidebar.visible {
  left: 0px;
}

.sidebar-btn {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  cursor: pointer;
  margin: 20px;
  top: 40%;
  position: absolute;
  right: -60px;
  font-size: 15px;
}

.sidebar-btn span {
  height: 5px;
  margin-bottom: 5px;
  display: block;
}

#sidebar-shadow  {
  margin-bottom: 5px;
  display: block;
}

oraz: 
<script>
    $(document).ready(function() {
        $('.sidebar-btn').click(function(){

            $('#sidebar').toggleClass('visible');
        });
    });
</script>

 

Obracaj w CSS zdjęcie o 180st, w osobnej klasie (możesz dać jakieś animacje). Później wraz z wysunięciem menu dodawaj odpowiednią klasę, a przy schowaniu usuwaj.