Add dropdown component

This commit is contained in:
Chris McCord 2021-11-22 11:21:01 -05:00
parent 81b86c2c21
commit 7209a3121c
3 changed files with 95 additions and 68 deletions

View file

@ -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()

View file

@ -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 %></:title>
<:subtitle>@<%= @current_user.username %></:subtitle>
<:link redirect_to={profile_path(@current_user)}>View Profile</:link>
<:link redirect_to={Routes.settings_path(LiveBeatsWeb.Endpoint, :edit)}Settings</:link>
</.dropdown>
"""
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"""
<!-- User account dropdown -->
<div class="px-3 mt-6 relative inline-block text-left">
<div>
<button
id={@id}
type="button"
class="group w-full bg-gray-100 rounded-md px-3.5 py-2 text-sm text-left font-medium text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-purple-500"
phx-click={show_dropdown("##{@id}-dropdown")}
phx-hook="Menu"
data-active-class="bg-gray-100"
aria-haspopup="true"
>
<span class="flex w-full justify-between items-center">
<span class="flex min-w-0 items-center justify-between space-x-3">
<%= for img <- @img do %>
<img class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" alt="" {assigns_to_attributes(img)}/>
<% end %>
<span class="flex-1 flex flex-col min-w-0">
<span class="text-gray-900 text-sm font-medium truncate"><%= render_slot(@title) %></span>
<span class="text-gray-500 text-sm truncate"><%= render_slot(@subtitle) %></span>
</span>
</span>
<svg class="flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</span>
</button>
</div>
<div
id={"#{@id}-dropdown"}
phx-click-away={hide_dropdown("##{@id}-dropdown")}
class="hidden z-10 mx-3 origin-top absolute right-0 left-0 mt-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-200"
role="menu"
aria-labelledby={@id}
>
<div class="py-1" role="none">
<%= for link <- @link do %>
<.link
tabindex="-1"
role="menuitem"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-purple-500" {link}
><%= render_slot(link) %></.link>
<% end %>
</div>
</div>
</div>
"""
end
def show_mobile_sidebar(js \\ %JS{}) do
js
|> JS.show(to: "#mobile-sidebar-container", transition: "fade-in")

View file

@ -5,6 +5,8 @@ defmodule LiveBeatsWeb.LayoutView do
# so we instruct Elixir to not warn if the dashboard route is missing.
@compile {:no_warn_undefined, {Routes, :live_dashboard_path, 2}}
alias LiveBeatsWeb.Endpoint
def sidebar_active_users(assigns) do
~H"""
<div class="mt-8">
@ -40,14 +42,14 @@ defmodule LiveBeatsWeb.LayoutView do
</.link>
<.link
redirect_to={Routes.settings_path(LiveBeatsWeb.Endpoint, :edit)}
redirect_to={Routes.settings_path(Endpoint, :edit)}
class={"text-gray-700 hover:text-gray-900 hover:bg-gray-50 group flex items-center px-2 py-2 text-sm font-medium rounded-md #{if @active_tab == :settings, do: "bg-gray-200 hover:bg-gray-200"}"}
>
<.icon name={:adjustments} outlined class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"/>
Settings
</.link>
<% else %>
<.link redirect_to={Routes.sign_in_path(LiveBeatsWeb.Endpoint, :index)}
<.link redirect_to={Routes.sign_in_path(Endpoint, :index)}
class="text-gray-700 hover:text-gray-900 hover:bg-gray-50 group flex items-center px-2 py-2 text-sm font-medium rounded-md"
>
<svg class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"
@ -65,72 +67,15 @@ defmodule LiveBeatsWeb.LayoutView do
def sidebar_account_dropdown(assigns) do
~H"""
<!-- User account dropdown -->
<div class="px-3 mt-6 relative inline-block text-left">
<div>
<button
id={"#{@id}-menu"}
type="button"
class="group w-full bg-gray-100 rounded-md px-3.5 py-2 text-sm text-left font-medium text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-purple-500"
phx-click={show_dropdown("##{@id}-dropdown")}
phx-hook="Menu"
data-active-class="bg-gray-100"
aria-haspopup="true"
>
<span class="flex w-full justify-between items-center">
<span class="flex min-w-0 items-center justify-between space-x-3">
<img class="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0"
src={@current_user.avatar_url}
alt="">
<span class="flex-1 flex flex-col min-w-0">
<span class="text-gray-900 text-sm font-medium truncate"><%= @current_user.name %></span>
<span class="text-gray-500 text-sm truncate">@<%= @current_user.username %></span>
</span>
</span>
<svg class="flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</span>
</button>
</div>
<div
id={"#{@id}-dropdown"}
phx-click-away={hide_dropdown("##{@id}-dropdown")}
class="hidden z-10 mx-3 origin-top absolute right-0 left-0 mt-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-200"
role="menu"
aria-labelledby={"#{@id}-menu"}
phx-update="ignore"
>
<div class="py-1" role="none">
<.link
role="menuitem"
tabindex="-1"
redirect_to={profile_path(@current_user)}
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-purple-500"
>View Profile</.link>
<.link
role="menuitem"
tabindex="-1"
redirect_to={Routes.settings_path(LiveBeatsWeb.Endpoint, :edit)}
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-purple-500"
>Settings</.link>
</div>
<.dropdown id={@id}>
<:img src={@current_user.avatar_url}/>
<:title><%= @current_user.name %></:title>
<:subtitle>@<%= @current_user.username %></:subtitle>
<div class="py-1" role="none">
<.link
role="menuitem"
tabindex="-1"
href={Routes.o_auth_callback_path(LiveBeatsWeb.Endpoint, :sign_out)}
method={:delete}
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-purple-500"
>Sign out</.link>
</div>
</div>
</div>
<:link redirect_to={profile_path(@current_user)}>View Profile</:link>
<:link redirect_to={Routes.settings_path(Endpoint, :edit)}>Settings</:link>
<:link href={Routes.o_auth_callback_path(Endpoint, :sign_out)} method={:delete}>Sign out</:link>
</.dropdown>
"""
end
end