Как обозначить активный элемент в меню с использованием Bootstrap u thymeleaf?

<nav class="navbar navbar-expand-md sticky-top navbar-ligth bg-fadded"> 
        <a class="nav-link waves-effect waves-light" th:href="@{/}"> 
            <img class="home-logo" alt="UTL-2" th:src="@{/static/img/site-logo.png}"/></a> 
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" 
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
            <span class="navbar-toggler-icon"></span> 
        </button> 
        <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent"> 
            <ul id="myDIV" class="navbar-nav mr-auto"> 
                <li class="nav-item" th:classappend="${module == 'login' ? 'active' : ''}"> 
                    <a class="nav-link waves-effect waves-light" th:href="@{/login}">Вход 
                        <span class="sr-only">(current)</span></a> 
                </li> 
 
                <li class="nav-item" th:classappend="${module == 'plan' ? 'active' : ''}"> 
                    <a class="nav-link waves-effect waves-light" th:href="@{/plan}">График <br/>отгрузки</a> 
                </li> 
 
                <li class="nav-item" th:classappend="${module == 'orders' ? 'active' : ''}"> 
                    <a class="nav-link waves-effect waves-light" th:href="@{/orders}">Заявки</a> 
                </li> 
 
                <li class="nav-item" th:classappend="${module == 'stations' ? 'active' : ''}"> 
                    <a class="nav-link waves-effect waves-light" th:href="@{/stations}">Справочник <br/>станций</a> 
                </li> 
 
                <li class="nav-item"> 
                    <a class="nav-link waves-effect waves-light" th:href="@{/partner}">Справочник <br/>контрагентов</a> 
                </li> 
 
                <li class="nav-item"> 
                    <a class="nav-link waves-effect waves-light" th:href="@{/map}">Карта</a> 
                </li> 
 
                <li class="nav-item"> 
                    <a class="nav-link waves-effect waves-light" th:href="@{/info}">Информация</a> 
                </li> 
 
                <li class="nav-item" sec:authorize="hasRole('ADMIN')"> 
                    <a class="nav-link waves-effect waves-light" th:href="@{/admin}">Панель <br/>администратора</a> 
                </li> 
 
            </ul> 
 
            <div id="logged-in-info"> 
                <span sec:authorize="isAuthenticated()">Hello, <b sec:authentication="name">(Anonimous)</b></span> 
                <!--<span th:text="${#authentication.getPrincipal().getUsername()}"></span>--> 
 
                <form sec:authorize="isAuthenticated()" method="post" th:action="@{/logout}"> 
                    <input type="submit" class="btn btn-light" value="Logout"/> 
                </form> 
                <form sec:authorize="isAnonymous()" method="post" th:action="@{/login}"> 
                    <input type="submit" class="btn" value="Login"/> 
                </form> 
            </div> 
        </div> 
 
 
    </nav>

    <script> 
        // Add active class to the current button (highlight it) 
        var header = document.getElementById("myDIV"); 
        var btns = header.getElementsByClassName("nav-item"); 
        for (var i = 0; i < btns.length; i++) { 
            btns[i].addEventListener("click", function() { 
                var current = document.getElementsByClassName("active"); 
                if (current.length > 0) { 
                    current[0].className = current[0].className.replace(" active", ""); 
                } 
                this.className += " active"; 
            }); 
        } 
    </script>