Action menu with sub-items

View

<%# app/views/projects/index.html.erb %>

<table class="table">
  <thread>
    <th>Name</th>
    <th>Manager</th>
    <th>Actions</th>
  </thread>
  <tbody>
      <% @projects.each do |project| %>
        <tr>
          <td>
            <%= link_to project.name, project_path(project) %>
          </td>
          <td><%= project.manager %></td>
          <td>
            <%= coupdoeil_hovercard_tag ProjectHovercard.with(project:).actions do %>
              <button type="button" class="btn">actions</button>
            <% end %>
          </td>
        </tr>
      <% end %>
  </tbody>
</table>

Hovercard class

# app/hovercards/project_hovercard

class ProjectHovercard < ApplicationHovercard
  before_action :set_project

  default_options_for :actions,
                      placement: "bottom-end, top-end",
                      trigger: :click,
                      offset: "1.25rem"
  default_options_for :export_actions,
                      placement: "right-start, left-start",
                      loading: :preload,
                      offset: "0.75rem"
  default_options_for :actions, :export_actions, animation: false
  
  def actions
    render layout: "menu"
  end

  def export_actions
    render layout: "menu"
  end

  private

  def set_project = @project = params[:project]
end

Hovercard templates

<%# app/hovercards/project_hovercard/actions.html.erb %>

<ul class="menu bg-base-200 rounded-box w-56">
  <li>
    <%= link_to "Archive", "#archive-project" %>
  </li>
  <%= coupdoeil_hovercard_tag ProjectHovercard.with(project: @project).export_actions do %>
    <li>
      <%= link_to "#archive-project", class: "inline-flex justify-between" do %>
        <span>Export</span>
        <span class="font-semibold">...</span>
      <% end %>
    </li>
  <% end %>
</ul>

<%# app/hovercards/project_hovercard/export_actions.html.erb %>

<ul class="menu bg-base-200 rounded-box">
  <li>
<%= link_to "to .csv", "#export-csv-project" %>
  </li>
  <li>
<%= link_to "to .xslx", "#export-excel-project" %>
  </li>
</ul>

Hovercard layout

<%# app/hovercards/layouts/menu.html.erb (custom layout) %>

<div style="background-color: white;
            border-radius: 4px; 
            border: 1px solid rgba(0, 0, 0, 0.2); 
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);"
>
  <%= yield %>
</div>

Generated with:

rails generate coupdoeil:hovercard Project action_menu export_actions