diff --git a/assets/js/app.js b/assets/js/app.js index c673ab7..fbddeae 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -57,7 +57,7 @@ Hooks.Menu = { window.requestAnimationFrame(() => this.activate(0)) } }) - this.menuItemsContainer.addEventListener("phx:hide", () => this.reset()) + this.menuItemsContainer.addEventListener("phx:hide-start", () => this.reset()) }, activate(index, fallbackIndex){ let menuItems = this.menuItems() diff --git a/lib/live_beats_web/live/live_helpers.ex b/lib/live_beats_web/live/live_helpers.ex index 43640ed..7a39efc 100644 --- a/lib/live_beats_web/live/live_helpers.ex +++ b/lib/live_beats_web/live/live_helpers.ex @@ -158,6 +158,88 @@ defmodule LiveBeatsWeb.LiveHelpers do """ end + @doc """ + Returns a button triggered dropdown with aria keyboard and focus supporrt. + + Accepts the follow slots: + + * `:id` - The id to uniquely identify this dropdown + * `:img` - The optional img to show beside the button title + * `:title` - The button title + * `:subtitle` - The button subtitle + + ## Examples + + <.dropdown id={@id}> + <:img src={@current_user.avatar_url}/> + <:title><%= @current_user.name %> + <:subtitle>@<%= @current_user.username %> + + <:link redirect_to={profile_path(@current_user)}>View Profile + <:link redirect_to={Routes.settings_path(LiveBeatsWeb.Endpoint, :edit)}Settings + + """ + def dropdown(assigns) do + assigns = + assigns + |> assign_new(:img, fn -> nil end) + |> assign_new(:title, fn -> nil end) + |> assign_new(:subtitle, fn -> nil end) + + ~H""" + +