98eda01ea4
It offers a better user experience and encourages users to click it. It still submits a form to the backend, and the animation is handled by CSS when the `.active` class is added to the parent.
27 lines
1.0 KiB
Plaintext
27 lines
1.0 KiB
Plaintext
<li>
|
|
<div class="group <%= items.compact.map { it[2] }.any? ? "active" : "" %>">
|
|
<button
|
|
type="button"
|
|
class="toggle-parent-to-active w-full text-orange-100 hover:text-white hover:bg-orange-700 flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
|
|
>
|
|
<%== part("components/icon", name: icon, classes: "text-white h-6 w-6 shrink-0") %>
|
|
<%= name %>
|
|
<div class="ml-auto shrink-0 group-[.active]:rotate-90">
|
|
<%== part("components/icon", name: "hero-chevron-right") %>
|
|
</div>
|
|
</button>
|
|
<ul class="mt-1 px-2 hidden group-[.active]:block space-y-1">
|
|
<% items.compact.each do |item_name, item_url, item_is_active| %>
|
|
<li>
|
|
<a
|
|
href="<%= item_url %>"
|
|
class="<%= item_is_active ? "bg-orange-700 text-white" : "text-orange-100 hover:text-white hover:bg-orange-700" %> block rounded-md py-2 pr-2 pl-9 text-sm leading-6"
|
|
>
|
|
<%= item_name %>
|
|
</a>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
</li>
|