My goal is to create a single page for multiple user types instead of separate views for ADMIN and USER. I want to display different elements based on the user's privilege level. Here is the code I came up with:
<html lang="en" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<!-- ... -->
<div class="row justify-content-center">
<div class="col-sm-1 px-2 pt-1">
<ul class="nav nav-pills flex-column">
<li class="nav-item" sec:authorize="hasAuthority('ADMIN')">
<a th:class="'nav-link' + ${loggedUser.isAdmin() ? ' active' : ''}" data-toggle="pill" href="#admin-tab">Admin</a>
</li>
<li class="nav-item">
<a th:class="'nav-link' + ${!loggedUser.isAdmin() ? ' active' : ''}" data-toggle="pill" href="#user-tab">User</a>
</li>
</ul>
</div>
<div class="col-sm-11 p-0 tab-content">
<div id="admin-tab" class="tab-pane container mw-100 p-0"...>
<div id="user-tab" class="tab-pane container p-0 mx-auto" th:object="${loggedUser}"...>
</div>
</div>
Upon rendering in the browser (while logged in as an ADMIN), the code transforms as follows:
<div class="row justify-content-center">
<div class="col-sm-1 px-2 pt-1">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#admin-tab">Admin</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#user-tab">User</a>
</li>
</ul>
</div>
<div class="col-sm-11 p-0 tab-content">
<div id="admin-tab" class="tab-pane container mw-100 p-0">
<!-- content for the admin tab -->
</div>
<div id="user-tab" class="tab-pane container p-0 mx-auto">
<!-- content for the user tab -->
</div>
However, there seems to be an issue where the content isn't displayed immediately. Clicking on the User tab before going back to the Admin tab shows the content. This behavior is problematic and needs fixing.
Further investigation shows that even with the Bootstrap 4 tablist role added, the issue persists. Why is the tab content not displaying correctly, and how can this be resolved?