I have an application created with spring boot, thymeleaf 3 and a vertical menu on the left. Each time I change from href to the menu, the page is completely recharged with what the logo and icons are reloaded with a little blink. Does anyone know how I can create a vertical menu and only change the content (right div) and not recharge the whole page or not see the flickering of the menu?
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.5.RELEASE</version>
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
<thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.3.0</thymeleaf-layout-dialect.version>
<thymeleaf-extras-springsecurity4.version>3.0.2.RELEASE</thymeleaf-extras-springsecurity4.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
...
admin.html
<!DOCTYPE html>
<html lang="es">
<head>
<!--/*/ <th:block th:include="fragments/header-admin :: header-admin"></th:block> /*/-->
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<!--/*/ <th:block th:include="fragments/sidebar-admin :: sidebar-admin"></th:block> /*/-->
<!-- Page Content Holder -->
<div id="content">
<!--/*/ <th:block th:include="fragments/topbar-admin :: topbar-admin"></th:block> /*/-->
</div>
</div>
<!--/*/ <th:block th:include="fragments/footer-admin :: footer-admin">
</th:block> /*/-->
</body>
</html>
sidebar-admin.html
<!DOCTYPE html>
<html lang="es" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"></meta>
<title></title>
</head>
<body>
<div th:fragment="sidebar-admin">
<nav id="sidebar">
<div class="sidebar-header">
<h3 class="mb-0"><img th:src="@{images/logoAlfa1.png}" class="logo" alt=""></img></h3>
<strong><img th:src="@{images/logoAlfa1.png}" class="logoSmall" alt=""></img></strong>
</div>
<ul class="list-unstyled components">
<p class="mb-0 pl-3 py-2">ADMINISTRACIÓ</p>
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle pl-3"><i class="fas fa-user mr-2"></i>Clients</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a href="admin">Llistar</a>
</li>
<li>
<a href="#">Crear</a>
</li>
<li>
<a href="#">Modificar</a>
</li>
<li>
<a href="#">Eliminar</a>
</li>
</ul>
</li>
<li>
<a href="#" class="pl-3"><i class="fas fa-file-invoice mr-2"></i>Factures</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle pl-3"><i class="fas fa-th mr-2"></i>Productes</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
<a href="#"><i class="fas fa-paint-roller mr-2"></i>Pintures</a>
</li>
<li>
<a href="#"><i class="fas fa-swatchbook mr-2"></i>Fustalet</a>
</li>
</ul>
</li>
<li>
<a href="comandes" class="pl-3"><i class="fas fa-file-alt mr-2"></i>Comandes</a>
</li>
<li>
<a href="informes" class="pl-3"><i class="far fa-chart-bar mr-2"></i>Informes</a>
</li>
</ul>
<div class="prova">añlskdfjlsadkfj</div>
</nav>
</div>