<nav class="fixed top-0 left-0 right-0 h-16 bg-[#151617] hidden sm:block">
    <div class="flex m-2 items-center justify-end">
        <div>
            <button id="dropdown-open-btn">
                <img id="user-avatar" src="https://www.gravatar.com/avatar/" loading="lazy" class="w-12 h-12 rounded-full flex justify-center">
            </button>
            <div class="bg-[#151617] p-2 absolute z-1 rounded-xl mt-2 right-2 w-48" id="dropdown" hidden>
                <button onclick="logout()" class="block p-2 hover:bg-[#ff0000] w-full rounded-md pt-1 text-left font-medium">
                    <span class="material-symbols-outlined align-middle mr-1">logout</span>
                    <span class="align-middle">Logout</span>
                </button>
                <button onclick="switchTab('delete_account')" class="block p-2 hover:bg-[#ff0000] w-full rounded-md pt-1 text-left font-medium">
                    <span class="material-symbols-outlined align-middle mr-1">delete</span>
                    <span class="align-middle">Delete Account</span>
                </button>
            </div>
        </div>
    </div>
</nav>