9d5cf249ea
There are several ways to show SVG in HTML. One of the recommended way is showing SVG inline. We are doing it. But long SVG paths make hard to maintain HTML files. Also some of the icons used multiple times. I created an icon component and show icon depending on its name. So all of the our SVG icons go to "icon.erb" file. I excluded this file from erb_formatter because it couldn't format `when` cases correctly.
27 lines
1.0 KiB
Plaintext
27 lines
1.0 KiB
Plaintext
<li>
|
|
<div class="group <%= items.compact.map { _1[2] }.any? ? "active" : "" %>">
|
|
<button
|
|
type="button"
|
|
class="sidebar-group-btn 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"
|
|
>
|
|
<%== render("components/icon", locals: { name: icon, classes: "text-white h-6 w-6 shrink-0" }) %>
|
|
<%= name %>
|
|
<div class="ml-auto shrink-0 group-[.active]:rotate-90">
|
|
<%== render("components/icon", locals: { 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>
|