<div class="sticky top-0 z-20 h-16 bg-black">
  <div class="max-w-7xl sm:mx-auto">
    <!-- Sidebar toggle, controls the 'sidebarOpen' sidebar state. -->
    <a href={Routes.event_index_path(@conn, :index)} class="mt-3 float-left">
      <img src="/images/logo.svg" class="h-8" />
    </a>

    <div class="flex justify-between items-center float-right mt-3">
      <div class="flex items-center">
        <!-- Profile dropdown -->
        <div class="ml-3 relative">
          <div>
            <button phx-click-away={JS.hide(to: "#profile-dropdown", transition: "animate__animated animate__fadeOut", time: 300)} phx-click={JS.toggle(to: "#profile-dropdown", out: "animate__animated animate__fadeOut", in: "animate__animated animate__fadeIn", time: 800)} type="button" class="max-w-xs bg-gray-800 text-white px-3 py-2 flex items-center text-sm rounded-md" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
              <span class="sr-only">Open user menu</span>
              <%= @user.email %>
            </button>
          </div>


          <div id="profile-dropdown" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-200 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
            <%= render("_user_menu.html", conn: @conn, user: @user) %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>