There is a navigation bar in which the active element should mark the active element, but the question arose how to get the address of the current page using thymeleaf or in javascript, for example / login, / home, / map in order to use it further to add the class "active" to the element: th: classappend = "$ {module == 'login'? 'active': ''}, because the module element must be manually added to each controller in the post and get requests, which is not very elegant. Here is the navbar itself all elements:
<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>
I used the script for all this, it is executed, but each menu item leads to a new page and the "active" class disappears during the update:
<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>