Forked from - edge: 'right' Slim SideNav

xxxxxxxxxx
 
<!--Double navigation-->
  <header> 
    <!-- Chat Sidebar -->
    <div id="slide-out" class="side-nav fixed wide slim">
      <ul class="custom-scrollbar frndsOnline-custom-scrollbar">
        <li>
          <ul class="collapsible collapsible-accordion">
            <li>
              <a id="toggle-test" class="waves-effect"> <i class="sv-slim-icon fas fa-angle-double-left"></i>Minimize menu</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- ./Chat Sidebar --> 
    <!-- Navbar -->
    <nav class="navbar navbar-expand scrolling-navbar double-nav navbar-dark"> 
      <!-- Chat Sidebar - Toggle Button -->
      <div class="float-right"> <a href="#" class="button-collapse" id="frndsOnlineTglBtn" data-activates="slide-out"> <i class="fas fa-bars"></i> click here to open slim sidenav </a> </div>
      <!-- ./Chat Sidebar - Toggle Button --> 
    </nav>
    <!-- ./Navbar --> 
  </header>
  <!-- ./Double navigation-->
<main>
  <p>Watch the <code>.fa-angle-double-left</code> bug</p>
  <p>When opened, <code>.fa-angle-double-right</code> should be added</p>
</main>

xxxxxxxxxx
 
#frndsOnlineTglBtn {
  color: black;
}
​
// uncomment to watch the icon vanish instead of getting rotated
// or add .fa-rotate-180 with this class to watch it still vanish
.fa-angle-double-left {
  //transform: rotate(180deg);
}
​
main {
  padding: 10%;
}

xxxxxxxxxx
 
// JavaScript Document
$(function () {
​
  new WOW().init();
​
  // SideNav Button Initialization
  $('#frndsOnlineTglBtn.button-collapse').sideNav({
    edge: 'right'
  });
  // SideNav Scrollbar Initialization
  var sideNavScrollbar = document.querySelector('.frndsOnline-custom-scrollbar');
  var ps = new PerfectScrollbar(sideNavScrollbar);
});
​
$(function () {
  $("#toggle-test").click(function () {
    if ($("#slide-out").hasClass('slim')) {
      $("#slide-out").removeClass('slim');
      $(".sv-slim-icon").removeClass('fa-angle-double-left').addClass('fa-angle-double-right');
    } else {
      $("#slide-out").addClass('slim');
      $(".sv-slim-icon").removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
    }
  });
});

Console errors: 0