I am facing problem with thymeleaf. I don't know why my class does not apply to my link in header. When user is on endpoint /about I want him to do not see about link in header, but when he is on any other endpoint I want him to see it. I tried class append, but it did not work.
header.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity6">
<head>
<title>Header</title>
</head>
<body>
<header>
<a sec:authorize="isAnonymous()" th:href="@{/register}">Register</a>
<a sec:authorize="isAnonymous()" th:href="@{/login}">Login</a>
<a sec:authorize="hasRole('ROLE_ADMIN')" th:classappend="#{httpServletRequest.getRequestURI() == '/about'} ? 'hidden' : 'show'" th:href="@{/about}">About</a>
<a sec:authorize="isAuthenticated()" th:href="@{/logYouOut}">Logout</a>
</header>
</body>
</html>
form-style.css
body {
background-color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
h1 {
margin-bottom: 20px;
}
form {
background-color: #3399ff;
padding: 20px;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
}
form input[type="text"],
form input[type="password"],
form input[type="number"],
form input[type="submit"] {
margin-bottom: 10px;
padding: 5px;
border: none;
border-radius: 3px;
width: 200px;
}
form input[type="submit"] {
background-color: #ffffff;
color: #3399ff;
cursor: pointer;
width: auto;
}
a{
text-decoration: none;
color: black:
font-weight: bold;
padding: 10px;
}
header {
height: 10vh;
width: 100%;
position: fixed;
top: 0;
background-color: #3399ff;
display: flex;
align-items: center;
justify-content: center;
}
.hidden {
display: none;
padding: 30px;
}
.show {
display: block;
padding: 200px;
}
What`s wrong there? Thanks