erp-imprimelibros/src/main/resources/templates/imprimelibros/partials/topbar.html

<div th:fragment="topbar" th:remove="tag">
	<header id="page-topbar">
		<div class="layout-width">
			<div class="navbar-header">
				<div class="d-flex">
					<!-- LOGO -->
					<div class="navbar-brand-box horizontal-logo">
						<a href="/" class="logo logo-dark">
							<span class="logo-sm">
								<img src="/assets/images/logo-sm.png" alt="" height="22">
							</span>
							<span class="logo-lg">
								<img src="/assets/images/logo-dark.png" alt="" height="45">
							</span>
						</a>

						<a href="/" class="logo logo-light">
							<span class="logo-sm">
								<img src="/assets/images/logo-sm.png" alt="" height="22">
							</span>
							<span class="logo-lg">
								<img src="/assets/images/logo-light.png" alt="" height="45">
							</span>
						</a>
					</div>

					<button type="button" class="btn btn-sm px-3 fs-16 header-item vertical-menu-btn topnav-hamburger"
						id="topnav-hamburger-icon">
						<span class="hamburger-icon">
							<span></span>
							<span></span>
							<span></span>
						</span>
					</button>
				</div>

				<div class="d-flex align-items-center">

					<div class="dropdown ms-1 topbar-head-dropdown header-item">
						<button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle"
							data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							<img id="header-lang-img" src="/assets/images/flags/spain.svg" alt="Header Language"
								height="20" class="rounded">

						</button>
						<div class="dropdown-menu dropdown-menu-end">

							<!-- item-->
							<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="es-ES"
								title="Spanish">
								<img src="/assets/images/flags/spain.svg" alt="user-image" class="me-2 rounded"
									height="18">
								<span class="align-middle">Español</span>
							</a>

							<!-- item-->
							<a href="javascript:void(0);" class="dropdown-item notify-item language py-2"
								data-lang="en-GB" title="English">
								<img src="/assets/images/flags/gb.svg" alt="user-image" class="me-2 rounded"
									height="18">
								<span class="align-middle">English</span>
							</a>

						</div>
					</div>

					<div th:if="${isAuth}"
						class="ms-1 header-item d-none d-sm-flex">
						<button type="button" id="btn_cart"
							class="btn btn-icon btn-topbar material-shadow-none btn-ghost-secondary rounded-circle light-dark-mode">
							<a href="/cart">
								<i class="ri-shopping-cart-2-line fs-22"></i>
							</a>
							<span id="cart-item-count"
								class="position-absolute topbar-badge cartitem-badge fs-10 translate-middle badge rounded-pill bg-info d-none">
								0
							</span>
						</button>
					</div>



					<div th:if="${isAuth}">
						<div class="dropdown ms-sm-3 header-item topbar-user">
							<button type="button" class="btn" id="page-header-user-dropdown" data-bs-toggle="dropdown"
								aria-haspopup="true" aria-expanded="false">
								<span sec:authorize="isAuthenticated()" class="text-center ms-xl-2">
									<span class="d-none d-xl-inline-block ms-1 fw-medium user-name-text"
										th:text="${#authentication.principal.fullname}">Nombre</span>
									<div th:if="${#authentication.principal.role != 'USER'}">
										<span class="d-none d-xl-block ms-1 fs-12 text-muted user-name-sub-text"
											th:text="${#authentication.principal.role}">Rol</span>
									</div>
								</span>
							</button>
							<div class="dropdown-menu dropdown-menu-end">
								<!-- item-->
								<h6 class="dropdown-header"><span th:text="#{app.bienvenido}">Bienvenido</span> <span
										th:text="${#authentication.principal.fullname}">User</span> <span>!</span></h6>
								<a class="dropdown-item" href="/pages-profile"><i
										class="mdi mdi-account-circle text-muted fs-16 align-middle me-1"></i> <span
										class="align-middle" th:text="#{app.perfil}">Perfil</span></a>
								<a class="dropdown-item" href="/apps-chat"><i
										class="mdi mdi-message-text-outline text-muted fs-16 align-middle me-1"></i>
									<span class="align-middle" th:text="#{app.mensajes}">Mensajes</span></a>
								<div sec:authorize="hasRole('PREVIOUS_ADMINISTRATOR')">
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="#"
										onclick="document.getElementById('exitImpersonationForm').submit(); return false;">
										<i class="mdi mdi-account-switch text-muted fs-16 align-middle me-1"></i>
										<span class="align-middle" th:text="#{app.impersonate.exit}">Volver a mi usuario</span>
									</a>
								</div>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#"
									onclick="document.getElementById('logoutForm').submit(); return false;">
									<i class="mdi mdi-logout text-muted fs-16 align-middle me-1"></i>
									<span class="align-middle" data-key="t-logout" th:text="#{app.logout}">Cerrar
										sesión</span>
								</a>
							</div>
						</div>
					</div>
					<!-- Si NO está autenticado -->
					<div th:unless="${isAuth}">
						<a href="/login" class="btn btn-outline-primary ms-sm-3">
							<i class="mdi mdi-login"></i> <label th:text="#{login.login}">Iniciar sesión</label>
						</a>
					</div>

				</div>
			</div>
		</div>

		<form id="logoutForm" th:action="@{/logout}" method="post" class="d-none">
			<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
		</form>
		<form id="exitImpersonationForm" th:action="@{/impersonate/exit}" method="post" class="d-none">
			<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
		</form>
	</header>


</div>