Boa tarde. Estou alterando um bootstrap e já tem o menu lateral, e tem uma opção que do meu que tem o menu e submenu, mas eu preciso deixar ativo o menu clicado e seu submenu. Eu criei a função abaixo em JAvascript que limpa o clicado e deixa ativo o que acabou de clicar, mas, eu tenho no menu Movimentação e dentro do Movimentação tem Estoque e Pedido e quando eu clicar no submenu Pedido, deve ficar active o link de Pedido e tb de Movimentação e nao sei como mexer na minha função.Vou colocar parte do codigo apenas para nao ficar grande, mas apenas onde faz o menu lateral e a função JS que deixa active no link clicado. Obrigado
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class with font-awesome or any other icon font library -->
<li class="nav-item">
<a onclick="openPage('principal','conteudo')" href="#" class="nav-link active">
<i class="nav-icon fas fa-th-large"></i>
<p>
Principal
</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-edit"></i>
<p>
Cadastros
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a onclick="openPage('cadastro_centro_custos','conteudo')" href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Centro de Custos</p>
</a>
</li>
<li class="nav-item">
<a onclick="openPage('cadastro_clientes','conteudo')" href="#" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Clientes</p>
</a>
</li>
<li class="nav-item">
<a onclick="openPage('cadastro_fornecedores','conteudo')" href="#" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Fornecedores</p>
</a>
</li>
<li class="nav-item">
<a onclick="openPage('cadastro_produtos','conteudo')" href="#" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Produtos</p>
</a>
</li>
<li class="nav-item">
<a onclick="openPage('cadastro_usuarios','conteudo')" href="#" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Usuários</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link ">
<i class="nav-icon fas fa-book"></i>
<p>
Financeiro
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a onclick="openPage('contas_pagar','conteudo')" href="#" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Contas a Pagar</p>
</a>
</li>
<li class="nav-item">
<a onclick="openPage('contas_receber','conteudo')" href="#" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Contas a Receber</p>
</a>
</li>
<li class="nav-item">
<a onclick="openPage('fluxo_caixa','conteudo')" href="#" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Fluxo de Caixa</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link ">
<i class="nav-icon fas fa-table"></i>
<p>
Movimentação
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a onclick="openPage('mov_estoque','conteudo')" href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Estoque</p>
</a>
</li>
<li class="nav-item">
<a onclick="openPage('mov_pedidos','conteudo')" href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Pedidos</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a onclick="openPage('relatorio','conteudo')" href="#" class="nav-link">
<i class="nav-icon fas fa-copy"></i>
<p>
Relatórios
</p>
</a>
</li>
<li class="nav-item">
<a onclick="openPage('mudar_senha','conteudo')" href="#" class="nav-link">
<i class="nav-icon fas fa-key"></i>
<p>
Mudar a Senha
</p>
</a>
</li>
<li class="nav-item">
<a href="?sair" class="nav-link">
<i class="nav-icon fas fa-sign-out-alt"></i>
<p>
Sair do Sistema
</p>
</a>
</li>
</ul>
<script>
var navItems = document.querySelectorAll(".nav-link");
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener("click", function() {
clearActiveMenu();
this.classList.add("active");
});
}
function clearActiveMenu(){
//nav nav-treeview
navItems.forEach(li =>{
li.classList.remove("active");
})
}
</script>
</nav>