Set active Bootstrap navbar item with Phoenix

Questions & Help Questions
, ,
1

Hi all, I’m using Phoenix with Bootstrap and I’m having some trouble figuring out the best way to set the active navbar item.

In Bootstrap, adding the "active" class to a nav item sets it as the current nav item. My goal is to do something like this in my Phoenix templates:

<li class="nav-item <%= nav_item_state(:foos) %>">
  <%= link "Foos", to: Routes.foo_path(@conn, :index), class: "nav-link" %>
</li>

<li class="nav-item <%= nav_item_state(:bars) %>">
  <%= link "Bars", to: Routes.bar_path(@conn, :index), class: "nav-link" %>
</li>

and something like this in my controllers:

# I want to avoid having to pass `:foos`/`:bars` as an assign every time I call `render`
defmodule MyAppWeb.FooController do
  ...
  def active_nav_item, do: :foos
end

defmodule MyAppWeb.BarController do
  ...
  def active_nav_item, do: :bars
end

I want nav_item_state(:foos) to return "active" when the current controller is FooController, and to return "" otherwise.

I think nav_item_state should be defined in my LayoutView module, but not really sure how to piece things together. Appreciate any suggestions!