Add dropdown component

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

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 %></: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")

lib/live_beats_web/views/layout_view.ex

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