<div th:fragment="sidebar" th:remove="tag">
	<!-- ========== App Menu ========== -->
	<div class="app-menu navbar-menu">
		<!-- LOGO -->
		<div class="navbar-brand-box">
			<!-- Dark 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>
			<!-- Light Logo-->
			<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>
			<button type="button" class="btn btn-sm p-0 fs-20 header-item float-end btn-vertical-sm-hover"
				id="vertical-hover" 
				href="/#" data-bs-toggle="tooltip" data-bs-placement="right" title="Expand">
				<i class="ri-record-circle-line"></i>
			</button>
		</div>

		<div id="scrollbar">
			<div class="container-fluid">

				<div id="two-column-menu">
				</div>
				<ul class="navbar-nav" id="navbar-nav">
					<li class="nav-item">
						<a class="nav-link menu-link" href="/">
							<i class="ri-home-line"></i> <span th:text="#{app.sidebar.inicio}">Inicio</span>
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link menu-link" href="/users">
							<i class="ri-user-line"></i> <span th:text="#{app.sidebar.usuarios}">Usuarios</span>
						</a>
					</li>
					<div th:if="${#authentication.principal.role == 'SUPERADMIN'}">
					<li class="nav-item">
						<a class="nav-link menu-link" href="/">
							<i class="ri-settings-2-line"></i> <span th:text="#{app.sidebar.configuracion}">Configuración</span>
						</a>
					</li>
					</div>
				</ul>
			</div>
			<!-- Sidebar -->
		</div>

		<div class="sidebar-background"></div>
	</div>
	<!-- Left Sidebar End -->
	<!-- Vertical Overlay-->
	<div class="vertical-overlay"></div>
</div>