There is a file that contains a fragment for the navbar. The idea is to have listItems in the navbar, and upon clicking on those listItems, another subnavigationbar should open below it.
Below is the code I currently have:
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<body>
<div>
<div th:fragment="navbar">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarTogglerDemo03"
aria-controls="navbarTogglerDemo03" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a id="movies"
th:class="(${#httpServletRequest.requestURI}=='/movies') ? 'nav-link active' : 'nav-link'"
href="#subNavbarId">Movies</a></li> <!-- href fails -->
<li class="nav-item"><a id="hr"
th:class="(${#httpServletRequest.requestURI}=='/info') ? 'nav-link active' : 'nav-link'"
href="/info">Info</a></li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right">
<div sec:authorize="isAuthenticated()">
Logged in: <span sec:authentication="name"></span>
</div>
</ul>
</nav>
<script type="text/javascript">
var projects = document.getElementById("movies");
var subNavBar = document.getElementById("subNavbarId"); //Failure
projects.addEventListener("click", function() {
subNavBar.style = "display:block;"
})
</script>
</div>
<div class = "subNavClass" id="subNavbarId" th:fragment="subnavbar" style="display: none;">
<nav id="navbar-nav ms-auto" class="navbar navbar-expand-lg"
style="background-color: #F5F5F5;">
<div class="collapse navbar-collapse">
<a class="navbar-brand px-5"></a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item"><a id="subnavbar-content"
href="/movieList"> movieList</a></li>
</ul>
</div>
</nav>
<script type="text/javascript">
var subNavBar = document.getElementById("subNavbarId");
subNavBar.addEventListener("mouseleave", function() {
subNavBar.style = "display:none;"
})
</script>
</div>
</div>
</body>
</html>
The desired scenario is to click on "movies" in the navbar and have a subnavbar displayed with movieList. Similarly, when clicking somewhere outside, the subnavbar should fade away.
Please provide guidance. PS: Complete beginner here