How can I identify active menu in phoenix?

Phoenix Forum Questions / Help
,
1

Hello, I have read this article but I think it is old post, I just want a way for identifying current menu.

my menu maps in my shared layout are:

  def main_menu do
    menu = [
      home: {"خدمات", "/", [
          {"طراحی وب اپلیکیشن", "/sup1", "fa fa-code"}, {"طراحی اپلیکیشن موبایل", "/sup2", "fa fa-television"}, {"افزونه نویسی جوملا", "/sup3", "fa fa-tablet"}
        ]},
      blog: {"بلاگ", "/blog", [

        ]},
      about: {"درباره ما", "/about", [
        ]},
      contact: {"ارتباط با ما", "/contact", [

        ]}
    ]
    menu
  end
end

and my code in the template is :

but I have many bugs in it, if the user enter address like /blog/:id I won’t be able which menu is; even I can’t know or identify which menu is when my user enter /blog/ instead of/blog`

what do I do for that now? I need this in both my menu and my breadcrumb.

my breadcrumb:

<nav aria-label="breadcrumb" class="breadcrumb">
  <div class="container">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="<%= page_path(@conn, :index) %>" class="a-home"><i class="fa fa-home" aria-hidden="true"></i>  ترانگل</a></li>
      <%= for %{title: title, link: link} <- @breadcrumb do %>
      <%= if @conn.request_path == link && length(@breadcrumb) > 1 do %>
        <li class="breadcrumb-item"><a href="<%= link %>"><%= title %></a></li>
      <% else %>
        <li class="breadcrumb-item active" aria-current="page"><%= title %></li>
      <% end %>
      <% end %>
    </ol>
  </div>
</nav>

my project link: https://github.com/shahryarjb/custom_phoenix_error

elixir 1.6 - phoenix 1.3

Thanks

2

I fixed my menu, I sent active_menu: number to the _navigation.html.eex and I edited template

<ul class="navbar-nav">
        <%=
          # inspect @conn.request_path

          for {_key, {name, addres, active_menu, sub}} <- main_menu() do %>
          <%=if length(sub) > 0 do %>
              <%=if active_menu === @active_menu do
                tag(:li, class: "nav-item dropdown active")
              else
                tag(:li, class: "nav-item dropdown")
              end %>
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <%= name %>
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <%= for {subname, subaddres, icon}  <- sub do
                raw "<a class=\"dropdown-item\" href=#{subaddres}><i class=\"#{icon}\" aria-hidden=\"true\"></i> #{subname}</a><div class=\"dropdown-divider\"></div>"
              end %>
              </div>
            </li>
          <% else %>
          <%=
            if addres === @conn.request_path do
              tag(:li, class: "nav-item active")
            else
              tag(:li, class: "nav-item")
            end
          %>
              <%= raw "<a class=\"nav-link\" href=#{addres}>#{name}</a>" %>
          </li>
          <% end %>
        <% end %>
      </ul>
1 Like