Say, I have this:
<a href="/" class="active">Home</a>
What’s the best way to highlight the current link depending on the current url? For link3, it’ll lool like this:
<a href="/" class="">Home</a>
or without attribute 'class' at all
<a href="/link3" class="active">Link3</a>
I figure I need to create a dictionary and pass it to html. How would I go about this? I can’t figure out.
My navbar is a list of data entries (with some dropdown that are just further lists) and they define what is active or note, built up from the Views themselves so they know that they are being called or not and of which template.
Here’s how I did it in my project.
First, define a function in
Set css class for active link.
@spec css_class(Plug.Conn.t(), String.t(), String.t(), String.t()) :: String.t()
def css_class(conn, path, defaultClass, activeClass \\ "active") do
if path == Phoenix.Controller.current_path(conn) do
defaultClass <> " " <> activeClass
Then in my
app.html.eex call the function:
<%= link "Dashboard", to: Routes.user_path(@conn, :show, @current_user), class: css_class(@conn, Routes.user_path(@conn, :show, @current_user), "nav-link") %>
Saw your code and thought I would ask about this here.
Would it make sense in this case to replace the string concatenation with IO Lists?
[defaultClass, " ", activeClass]
~E(<%= defaultClass %> <%= activeClass %>)
This should be an order of magnitude faster. See:
The static part in this case is merely a space, but is this still a performance win, however small?
content_tag (which is used by
link) might not work with attrs (like
:class) as iolists since it would call
nested_attrs on them. And the “performance win” would probably be completely negligible.
Afaik the biggest performance difference comes from not joining everything into really big binaries and modifying those. I doubt class names fall anywhere close into that category of “big”.