<div class="sticky top-0 z-20 h-16 bg-black">
  <div class="mx-3 md:max-w-3xl lg:max-w-5xl md:mx-auto">
    <!-- Sidebar toggle, controls the 'sidebarOpen' sidebar state. -->
    <a href={~p"/events"} 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")}
              phx-click={JS.toggle(to: "#profile-dropdown")}
              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>
              <span class="hidden md:block"><%= @user.email %></span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                class="md:hidden w-5 h-5"
              >
                <path
                  fill-rule="evenodd"
                  d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-5.5-2.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 12a5.99 5.99 0 0 0-4.793 2.39A6.483 6.483 0 0 0 10 16.5a6.483 6.483 0 0 0 4.793-2.11A5.99 5.99 0 0 0 10 12Z"
                  clip-rule="evenodd"
                />
              </svg>
            </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>
