<!-- _user_dropdown.ejs -->
<button type="button" data-dropdown-toggle="dropdown" id="profileDropdownButton"
  class="bg-gray-700 rounded-md mx-2 px-2 focus:text-blue-400 text-lg font-bold" aria-expanded="true"
  aria-haspopup="true"><i class="fa fa-angle-down"></i></button>

<!-- This is an example component -->
<div class="max-w-lg mx-auto">
  <!-- Dropdown menu -->
  <div class="hidden dark:bg-gray-700 dark:text-white z-50 list-none divide-y divide-gray-100 rounded-md shadow my-4"
    id="dropdown">
    <ul class="py-1" aria-labelledby="dropdown">
      <li>
        <a href="/me" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Profile</a>
      </li>
      <li>
        <a href="/user/settings" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Settings</a>
      </li>
      <li>
        <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Earnings</a>
      </li>
      <li>
        <a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Sign out</a>
      </li>
    </ul>
  </div>
</div>
<script src="/scripts/flowbite.js"></script>