<!-- NAVBAR --> <nav class="navbar navbar-dark bg-dark navbar-expand-md"> <div class="container-fluid"> <a th:href="@{/}" class="navbar-brand logo">BookIT</a> <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar"> </button> <div class="navbar-collapse collapse" id="navbar"> <ul class="navbar-nav"> <li class="nav-item"><a th:href="@{/}" class="nav-link">Home</a></li> <!-- <li sec:authorize="isAnonymous()" class="nav-item"><a class="nav-link " href="#search">Search</a></li>--> <li sec:authorize="isAnonymous()" class="nav-item"><a class="nav-link " href="#services">Services</a> </li> <li sec:authorize="isAnonymous()" class="nav-item"> <a th:href="@{/users/register}" class="nav-link"><span>Register</span></a> </li> <li sec:authorize="isAnonymous()" class="nav-item"> <a th:href="@{/users/login}" class="nav-link"><span>Log in</span></a> </li> <!-- --> <div class="navbar-collapse collapse" id="navbarNavDarkDropdown"> <th:block sec:authorize="hasRole('ADMIN')"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown"> Admin Panel </a> <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink"> <li><a class="dropdown-item" th:href="@{/admin/statistics}">Statistics</a></li> <li><a class="dropdown-item" th:href="@{/admin/manage-users}">Manage Users</a></li> <li><a class="dropdown-item" th:href="@{/admin/manage-all-bookings}">View All Bookings</a> </li> </ul> </li> </th:block> </div> <div sec:authorize="isAuthenticated()" class="navbar-collapse collapse"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"> Album </a> <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink"> <li><a class="dropdown-item" th:href="@{/upload}">Add photos</a> </li> <li><a class="dropdown-item" th:href="@{/view-album/{id}(id=${session.currentUserId})}">View album</a> </li> </ul> </li> </ul> </div> <div sec:authorize="isAuthenticated()" class="navbar-collapse collapse"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"><span th:text="${session.currentUserFirstName}"></span><img class="img-profile rounded-circle" src="/images/undraw_profile_1.svg"> </a> <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink"> <li><a class="dropdown-item" th:href="@{/users/profile/{id}(id=${session.currentUserId})}">View profile</a> </li> <li><a class="dropdown-item" th:href="@{/view-all}">View Bookings</a></li> <li><a class="dropdown-item" th:href="@{/history}">View Bookings History</a></li> <li> <form th:action="@{/users/logout}" method="post" th:hidden="true" name="logoutForm"> <input type="submit" value="Logout"/> </form> <a class="dropdown-item" href="javascript: document.logoutForm.submit()">Logout</a> </li> </ul> </li> </ul> </div> </ul> </div> </div> </nav> <!-- .navbar -->
/*!*--------------------------------------------------------------*/ /* # Header*/ /*--------------------------------------------------------------*!*/ #header .logo { font-size: 30px; margin-left: 55px; /*margin: 0;*/ /*padding: 0;*/ line-height: 1; font-weight: 700; letter-spacing: 2px; } #header .logo:hover { transition: all 0.3s linear; } /*!*--------------------------------------------------------------*/ /* # Navigation Menu*/ /*--------------------------------------------------------------*!*/ .navbar { padding: 0; } .navbar ul { align-items: center; } .navbar a, .navbar a:focus { display: flex; align-items: center; justify-content: space-between; padding: 25px 15px 24px 15px; font-size: 14px; color: #fff; white-space: nowrap; } .navbar a:hover, .navbar .navbar .navbar li:hover > a { background: #333b3f; border-radius: 0px; color: white; } .img-profile { width: 20px; } .navbar .dropdown-item:active { background-color: #212529; } .navbar .dropdown a span { margin-right: 9px; }
<div class="navbar-collapse collapse"
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)