<nav th:fragment="topbar" class="navbar navbar-expand bg-white shadow mb-4 topbar">
    <div class="container-fluid">
        <button class="btn btn-link d-md-none me-3 rounded-circle" id="sidebarToggleTop" type="button">
            <i class="material-icons">menu</i>
        </button>

        <span th:text="${latestBalance}">Balance</span>

        <ul class="navbar-nav flex-nowrap ms-auto">

            <div class="d-none d-sm-block topbar-divider"></div>

            <li class="nav-item dropdown no-arrow">
                <div class="nav-item dropdown no-arrow">
                    <a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="#">
                        <span class="d-none d-lg-inline me-2 text-gray-600 small">Valerie Luna</span>
                        <img class="border rounded-circle img-profile" src="assets/img/avatars/avatar1.jpeg">
                    </a>
                    <div class="dropdown-menu shadow dropdown-menu-end animated--grow-in">
                        <a class="dropdown-item" href="#">
                            <i class="material-icons">person</i>&nbsp;Profile
                        </a>

                        <div class="dropdown-divider"></div>

                        <a class="dropdown-item" href="#">
                            <i class="material-icons">logout</i>&nbsp;Logout
                        </a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</nav>