gccmanpower/src/main/resources/templates/fragments/navbar.html

<th:block th:fragment="navbar(curPage, isAdmin)">
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
		<div class="container-fluid">
			<!-- Use container-fluid for full-width navbar -->
			<!-- Toggle button -->
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
				data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
				aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<!-- Navigation items on the left -->
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav me-auto">
					<!-- Superuser Navigation Items  -->
					<li class="nav-item"><a class="nav-link" th:href="@{/}" th:if="${curPage != 'home'}"> <i
								class=" fa-solid fa-house"></i>
							Home
						</a></li>
					<!-- <li class="nav-item"><a class="nav-link" th:href="@{/gccservicepaymenttracker/}"> <i
								class="fa-solid fa-file-invoice-dollar"></i>
							Payment Tracker
						</a></li> -->
					<!-- Admin-only links, visible only if isAdmin is true -->
					<th:block th:if="${isAdmin}">
						<li class="nav-item">
							<a class="nav-link" th:href="@{/?action=addEmployee}"
								onclick="if (document.getElementById('addEmployeeModal')) { bootstrap.Modal.getOrCreateInstance(document.getElementById('addEmployeeModal')).show(); return false; }">
								<i class="fa-solid fa-circle-plus"></i> Add Employee
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" th:href="@{/?action=updateEmployee}"
								onclick="if (document.getElementById('updateEmployeeModal')) { bootstrap.Modal.getOrCreateInstance(document.getElementById('updateEmployeeModal')).show(); return false; }">
								<i class="fa-solid fa-file-pen"></i> Update Employee
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" th:href="@{/?action=deleteEmployee}"
								onclick="if (document.getElementById('deleteEmployeeModal')) { bootstrap.Modal.getOrCreateInstance(document.getElementById('deleteEmployeeModal')).show(); return false; }">
								<i class="fa-solid fa-trash-can"></i> Delete Employee
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" th:href="@{/?action=deletedEmployees}"
								onclick="if (document.getElementById('deletedEmployeesModal')) { bootstrap.Modal.getOrCreateInstance(document.getElementById('deletedEmployeesModal')).show(); return false; }">
								<i class="fa-solid fa-user-slash"></i> Deleted Employees
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" th:href="@{/?action=deletedWorkOrders}"
								onclick="if (document.getElementById('deletedWorkOrdersModal')) { bootstrap.Modal.getOrCreateInstance(document.getElementById('deletedWorkOrdersModal')).show(); return false; }">
								<i class="fa-solid fa-file-circle-xmark"></i> Deleted Work Orders
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" th:href="@{/?action=positionHistory}"
								onclick="if (document.getElementById('positionHistoryModal')) { bootstrap.Modal.getOrCreateInstance(document.getElementById('positionHistoryModal')).show(); return false; }">
								<i class="fa-solid fa-clock-rotate-left"></i> Position History
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" th:href="@{/?action=addVendorWorkOrder}"
								onclick="if (document.getElementById('addVendorWorkOrderModal')) { bootstrap.Modal.getOrCreateInstance(document.getElementById('addVendorWorkOrderModal')).show(); return false; }">
								<i class="fa-solid fa-folder-plus"></i> Add Vendor / Work Order
							</a>
						</li>
					</th:block>
					<!-- <li class="nav-item">
						<a class="nav-link" href="#" onclick="openLoginModal(); return false;"
							th:if="${curPage != 'view-login-det'}">
							<i class="fa-solid fa-gauge"></i> Manpower Dashboard
						</a>
					</li> -->
				</ul>
				<!--Navigation item on the right-->
				<th:block th:if="${session.usrName != null}">
					<ul class="navbar-nav ms-auto align-items-center flex-row gap-3">
						<li class="nav-item me-2" id="manpower-update-badge" style="display: none;" th:if="${curPage == 'home'}">
							<a href="#" onclick="openManpowerUpdatesModal(); return false;" class="btn btn-sm btn-outline-info text-dark fw-semibold" style="border-radius: 20px; font-size: 0.85rem; padding: 4px 12px; background: rgba(13, 202, 240, 0.08); border-color: rgba(13, 202, 240, 0.4); display: inline-flex; align-items: center; gap: 5px;">
								<i class="fa-solid fa-clock-rotate-left text-info"></i> Last Updated: <span id="manpower-update-time">-</span>
							</a>
						</li>
						<li class="nav-item text-secondary fw-semibold" style="font-size: 0.9rem;">
							<i class="fa-solid fa-user me-1 text-primary"></i>
							<span th:text="${session.usrName} + ' (' + ${session.usrRole} + ')'">admin (ADMIN)</span>
						</li>
						<li class="nav-item">
							<form th:action="@{/usr-logout}" method="post" class="m-0 p-0 d-inline">
								<input th:if="${_csrf != null}" type="hidden" th:name="${_csrf.parameterName}"
									th:value="${_csrf.token}" />
								<button type="submit"
									class="nav-link btn btn-link text-decoration-none border-0 bg-transparent py-2"
									style="display: inline-flex; align-items: center; gap: 5px;">
									<i class="fa-solid fa-right-from-bracket"></i> Logout
								</button>
							</form>
						</li>
					</ul>
				</th:block>
				<th:block th:unless="${session.usrName != null}">
					<ul class="navbar-nav ms-auto" th:if="${curPage != 'login'}">
						<li class="nav-item">
							<a class="nav-link" th:href="@{/login}">
								<i class="fa-solid fa-right-to-bracket"></i> Login
							</a>
						</li>
					</ul>
				</th:block>
			</div>
		</div>
	</nav>
</th:block>