root.html.heex

<.dropdown>
  <:toggle>
    <svg class="flex-shrink-0 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" />
    </svg>
  </:toggle>
  <ul class="border shadow-xl menu bg-base-100 border-base-200 rounded-box w-52">
    <li>
      <%= live_redirect "Settings", to: Routes.admin_setting_edit_path(@conn, :edit) %>
    </li>
    <li>
      <%= link "Sign Out", to: Routes.admin_session_path(@conn, :delete), method: :delete %>
    </li>
  </ul>
</.dropdown>

shared_components.ex

  alias Phoenix.LiveView.JS

  def dropdown(assigns) do
    assigns =
      assigns
      |> assign_new(:id, fn -> "dom#{System.unique_integer()}" end)

    ~H"""
    <div class="relative inline-block text-left">
      <button phx-click={ JS.toggle(to: "##{@id}", in: {"duration-300", "opacity-0", "opacity-100"}, out: {"duration-75", "opacity-100", "opacity-0"})  } >
        <%= render_slot(@toggle) %>
      </button>
      <div id={@id} class="absolute right-0 z-20 hidden" phx-click-away={JS.hide(to: "##{@id}", transition: {"duration-75", "opacity-100", "opacity-0"})}>
        <%= render_slot(@inner_block, assigns) %>
      </div>
    </div>
    """
  end