Highlight active menu item and expand sidebar-item (Bootstrap 4)?

Question

JavaScript

Tell me how to highlight the active menu item on the sidebar

<nav id="sidebar" class="sidebar">
 <ul class="sidebar-nav">
  <li class="sidebar-item"><a href="/../<?=$rowCat['url']?>/" class="sidebar-link"><i class="<?=$rowCat['image_category']?>"></i> <span class="align-middle"><?=$rowCat['name_category']?></span></a></li> // Первый уровень
  <ul id="cat<?=$rowCat['id']?>" class="sidebar-dropdown list-unstyled collapse" data-parent="#sidebar">
    <li class="sidebar-item"><a class="sidebar-link" href="/../<?=$rowSubCat['url']?>/"><?=$rowSubCat['name_category']?></a> 
    </li> // Второй уровень
  </ul>
 </ul>
</nav>

You need to add to the Active class and the show class for class="sidebar-dropdown list-unstyled collapse<li class="sidebar-item">

<ul id="cat<?=$rowCat['id']?>" class="sidebar-dropdown list-unstyled collapse" data-parent="#sidebar">

I tried that, it didn't work

$(function () {
    var links = $('.sidebar sidebar-item');
    var url = (new URL(document.URL)||{});
    $.each(links, function (key, va) {
        var Link = (new URL(va.href)||{});
        Link.search = url.search;
        if (Link.href  == url.href ) {
            $(this).addClass('active').parent().addClass('show');
        }
    });
});

Answer 1

1. php: specify the relative path (path) completely and without links like "/../"
2. js: window.location.pathname current relative path, you must first remove the active/show class the previous active element
in bootstrap4 does not have a sidebar element -item is similar to nav-item?