<!-- User Dropdown -->
<div class="dropdown nav-item mx-2">
    <a
        href="#"
        class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
        id="userDropdown"
        data-bs-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false">
        <img src="{ROOT_URL}{AVATAR}" alt="" width="32" height="32" class="rounded-circle me-2"> <strong class="ms-2">{USERNAME}</strong>
    </a>
    <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end text-small shadow" aria-labelledby="userDropdown">
        <li><a href="{ROOT_URL}usercp" class="dropdown-item"><i class="fa fa-fw fa-user"></i> Profile</a></li>
        {topNavRightDropdown}
        <li><a href="{ROOT_URL}usercp/settings" class="dropdown-item"><i class="fa fa-fw fa-gear"></i> Settings</a></li>
        <li><hr class="dropdown-divider"></li>
        <li>
            <a href="{ROOT_URL}home/logout" class="dropdown-item"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
        </li>
    </ul>
</div>