Tenho uma classe #sidebar-show que, quando eu clico nele, quero que remova a classe d-none para aparecer a div abaixo. Estou utilizando Bootstrap.
O que acontece, é que quando eu clico em #sidebar-show a classe d-none não é removida.
OBS: Eu gostaria de remover o d-none do nav
$("#sidebar-show").click(function() {
$('#sidebar').removeClass("d-none");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar-mobile d-block d-sm-none" id="sidebar-show">
<i class="fas fa-bars"></i>
</div>
<nav class="d-none d-sm-block" id="sidebar">
<div class="sidebar-header">
<img src="logo-white.png" alt="">
</div>
<ul class="list-unstyled components">
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false"><i class="fas fa-chart-line mr-2"></i> Métricas</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fas fa-cogs mr-2"></i>Configurações</a>
</li>
</ul>
</nav>