显示侧边栏管理的活动菜单

Question

This is my adminlte sidebar.

 <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">
                <!--menu-open attribute-->
                <a href="#" class="menu-open nav-link active">
                    <i class="nav-icon fas fa-tachometer-alt"></i>
                    <p>
                        Adımlar
                        <i class="right fas fa-angle-left"></i>
                    </p>
                </a>
                <ul class="nav nav-treeview">
                    <li class="nav-item">
                        <a href="~/StepTwo/List" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Step 1</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="~/StepThree/List" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Step 2</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="~/StepFour/List" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Step 3</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="~/StepFive/List" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Step 4</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="~/StepSix/List" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Step 5</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="~/StepSeven/List" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Step 6</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="~/StepEight/List" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Step 7</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="~/StepEight/ListEight" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Step 8</p>
                        </a>
                    </li>
                    
                </ul>
            </li>
                </ul>
            </nav>

The script i have is below to make my sidebar active. I found it on github page but i guess im missing something and i cant seem to figure it out.

<script>
    var url = window.location;
    // for sidebar menu but not for treeview submenu
    $('ul.sidebar-menu a').filter(function () {
        return this.href == url;
    }).parent().siblings().removeClass('active').end().addClass('active');
    // for treeview which is like a submenu
    $('ul.treeview-menu a').filter(function () {
        return this.href == url;
    }).parentsUntil(".sidebar-menu > .treeview-menu").siblings().removeClass('active menu-open').end().addClass('active menu-open');
</script>

It does not work. I want to show last clicked menu to be active while the user wanders on the page. I'm a javascript newbie so very clear explanations appreciated.

Answer 1

Found an answer and this worked perfectly. Maybe it will help to someone else.

<script>
    /** add active class and stay opened when selected */
    var url = window.location;
    const allLinks = document.querySelectorAll('.nav-item a');
    const currentLink = [...allLinks].filter(e => {
        return e.href == url;
    });

    if (currentLink.length > 0) { //this filter because some links are not from menu
        currentLink[0].classList.add("active");
        currentLink[0].closest(".nav-treeview").style.display = "block";
        currentLink[0].closest(".has-treeview").classList.add("active");
    }
</script>