TaskManager/src/main/resources/templates/component/nav-sidebar.html

74 lines
3.6 KiB
HTML

<div th:fragment="nav-sidebar">
<div class="offcanvas offcanvas-start border-end border-dark" tabindex="-1" id="offcanvas-menu"
aria-labelledby="offcanvasLabel" style="box-shadow: 4px 0 0 rgba(0,0,0,0.1);">
<div class="offcanvas-header bg-light border-bottom border-dark">
<h5 class="offcanvas-title fw-bold" id="offcanvasLabel">
<i class="bi bi-menu-button-wide me-2"></i>Menu
</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body d-flex flex-column justify-content-between p-0">
<nav class="p-3">
<ul class="nav nav-pills flex-column gap-2">
<li class="nav-item">
<a class="nav-link link-dark border border-transparent" th:href="@{/dashboard}"
style="transition: all 0.2s;">
<i class="bi bi-bar-chart"></i> Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link link-dark border border-transparent" th:href="@{/tasks}">
<i class="bi bi-list-task me-2"></i> View Tasks
</a>
</li>
<li class="nav-item">
<a class="nav-link link-dark border border-transparent" th:href="@{/createTask}">
<i class="bi bi-plus-square me-2"></i> Create Task
</a>
</li>
</ul>
</nav>
<div class="border-top border-dark bg-light p-3">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<i class="bi bi-person-circle fs-3"></i>
</div>
<div class="flex-grow-1 ms-3">
<h6 class="mb-0 fw-bold" th:text="${userName}">User Account</h6>
<small class="text-muted" th:text="${userEmail}">user@example.com</small>
</div>
<button class="btn btn-sm btn-outline-dark border-0">
<!-- <i class="bi bi-gear-fill"></i> -->
<!-- Replace the previous button + dropup block with the following -->
<div class="dropup">
<!-- Toggle button (keeps the gear icon) -->
<button class="btn btn-sm btn-outline-dark" type="button" id="userMenuButton"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-gear-fill"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenuButton">
<li>
<form th:action="@{/logout}" method="post" class="m-0">
<input type="hidden" th:name="${_csrf.parameterName}"
th:value="${_csrf.token}" />
<button type="submit" class="dropdown-item">Sign Out</button>
</form>
</li>
<li><a class="dropdown-item" th:href="@{/profile}">Profile</a></li>
</ul>
</div>
</button>
</div>
</div>
</div>
</div>
</div>