Set data-active attributes on LiveView navigation in Phoenix

app.js

window.addEventListener("phx:page-loading-start", (_info) => {
  Array.from(document.getElementsByTagName("a")).forEach(
    (a) => (a.dataset.active = "false")
  );
});

window.addEventListener("phx:page-loading-stop", (_info) => {
  Array.from(document.getElementsByTagName("a")).forEach(
    (a) => {a.dataset.active = (a.href === document.location.href).toString()}
  );
});

example.ex

attr :icon, :string, required: true
attr :text, :string, required: true
attr :link, :string, required: true

def menu_link(assigns) do
  ~H"""
  <.link navigate={@link} class="data-[active=true]:bg-black/20">
    <.icon name={@icon} class="mr-2 flex-none" /> <%= @text %>
  </.link>
  """
end