streamlinked icon_helpers, added helper to set nav links 'active' on current route

This commit is contained in:
Adam Piontek 2021-02-25 18:21:43 -05:00
parent 6d99d289df
commit 015c7fe0a7
8 changed files with 63 additions and 88 deletions

View file

@ -1,4 +0,0 @@
defmodule Bones73k.Util.List do
def prepend_if(list, condition, item), do: (!!condition && [item | list]) || list
def append_if(list, condition, item), do: (!!condition && list ++ [item]) || list
end

View file

@ -2,7 +2,7 @@
<div class="container"> <div class="container">
<%= link to: Routes.page_path(@conn, :index), class: "navbar-brand" do %> <%= link to: Routes.page_path(@conn, :index), class: "navbar-brand" do %>
<%= icon_div @conn, "fas-skull-crossbones", class: "icon baseline" %> <%= icon_div @conn, "fas-skull-crossbones", [class: "icon baseline"] %>
Bones73k Bones73k
<% end %> <% end %>
@ -12,29 +12,45 @@
<div class="collapse navbar-collapse" id="navbarSupportedContent" phx-update="ignore"> <div class="collapse navbar-collapse" id="navbarSupportedContent" phx-update="ignore">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> <ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"> <li class="nav-item">
<%= link "Properties", nav_link_opts(@conn, to: Routes.property_index_path(@conn, :index), class: "nav-link") %>
</li>
<%# ACTIVE page link example %>
<%# <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link active" aria-current="page" href="#">Home</a>
</li> </li> %>
<%# DISABLED page link example %>
<%# <li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li> %>
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Link</a> <%= link "LiveDashboard", nav_link_opts(@conn, to: Routes.live_dashboard_path(@conn, :home), class: "nav-link") %>
</li> </li>
<% end %>
<li class="nav-item dropdown" phx-update="ignore"> <li class="nav-item dropdown" phx-update="ignore">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownExample" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <ul class="dropdown-menu" aria-labelledby="navbarDropdownExample">
<li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul> </ul>
</li> </li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul> </ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <ul class="navbar-nav">
<button class="btn btn-outline-success" type="submit">Search</button>
</form> <%= render "navbar/_user_menu.html", assigns %>
</ul>
</div> </div>
</div> </div>
</nav> </nav>

View file

@ -1,10 +0,0 @@
<ul>
<%= if @current_user do %>
<li><%= @current_user.email %></li>
<li><%= link "Settings", to: Routes.user_settings_path(@conn, :edit) %></li>
<li><%= link "Log out", to: Routes.user_session_path(@conn, :delete), method: :delete %></li>
<% else %>
<li><%= link "Register", to: Routes.user_registration_path(@conn, :new) %></li>
<li><%= link "Log in", to: Routes.user_session_path(@conn, :new) %></li>
<% end %>
</ul>

View file

@ -0,0 +1,24 @@
<li class="nav-item dropdown" phx-update="ignore">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdownUserMenu" data-bs-toggle="dropdown" aria-expanded="false">
<%= @current_user && "Account" || "Welcome" %>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownUserMenu">
<%= if @current_user do %>
<li><%= content_tag :span, @current_user.email, class: "dropdown-item-text" %></li>
<li><hr class="dropdown-divider"></li>
<li><%= link "Settings", nav_link_opts(@conn, to: Routes.user_settings_path(@conn, :edit), class: "dropdown-item") %></li>
<li><%= link "Log out", nav_link_opts(@conn, to: Routes.user_session_path(@conn, :delete), method: :delete, class: "dropdown-item") %></li>
<% else %>
<li><%= link "Register", nav_link_opts(@conn, to: Routes.user_registration_path(@conn, :new), class: "dropdown-item") %></li>
<li><%= link "Log in", nav_link_opts(@conn, to: Routes.user_session_path(@conn, :new), class: "dropdown-item") %></li>
<% end %>
</ul>
</li>

View file

@ -13,18 +13,6 @@
<%= render "_navbar.html", assigns %> <%= render "_navbar.html", assigns %>
<%# <section class="container">
</section> %>
<ul>
<li><%= link "Properties", to: Routes.property_index_path(@conn, :index) %></li>
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
<li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li>
<% end %>
</ul>
<%= render "_user_menu.html", assigns %>
<%= @inner_content %> <%= @inner_content %>
</body> </body>

View file

@ -1,35 +0,0 @@
defmodule Bones73kWeb.IconHelpers do
@moduledoc """
Generate SVG sprite use tags for SVG icons
"""
use Phoenix.HTML
import Bones73k.Util.List
alias Bones73kWeb.Router.Helpers, as: Routes
def icon_div(conn, name, div_opts \\ [], svg_opts \\ []) do
content_tag(:div, tag_opts(name, div_opts)) do
icon_svg(conn, name, svg_opts)
end
end
def icon_svg(conn, name, opts \\ []) do
content_tag(:svg, tag_opts(name, opts)) do
tag(:use, "xlink:href": Routes.static_path(conn, "/images/icons.svg#" <> name))
end
end
defp tag_opts(name, opts) do
classes = "#{Keyword.get(opts, :class, "")} #{name}" |> String.trim_leading()
styles = Keyword.get(opts, :style)
width = Keyword.get(opts, :width)
height = Keyword.get(opts, :height)
id = Keyword.get(opts, :id)
[class: classes]
|> prepend_if(styles, {:style, styles})
|> prepend_if(width, {:style, width})
|> prepend_if(height, {:style, height})
|> prepend_if(id, {:id, id})
end
end

View file

@ -4,7 +4,6 @@ defmodule Bones73kWeb.IconHelpers do
""" """
use Phoenix.HTML use Phoenix.HTML
import Bones73k.Util.List
alias Bones73kWeb.Router.Helpers, as: Routes alias Bones73kWeb.Router.Helpers, as: Routes
def icon_div(conn, name, div_opts \\ [], svg_opts \\ []) do def icon_div(conn, name, div_opts \\ [], svg_opts \\ []) do
@ -15,21 +14,11 @@ defmodule Bones73kWeb.IconHelpers do
def icon_svg(conn, name, opts \\ []) do def icon_svg(conn, name, opts \\ []) do
content_tag(:svg, tag_opts(name, opts)) do content_tag(:svg, tag_opts(name, opts)) do
tag(:use, "xlink:href": Routes.static_path(conn, "/images/icons.svg#" <> name)) tag(:use, "xlink:href": Routes.static_path(conn, "/images/icons.svg##{name}"))
end end
end end
defp tag_opts(name, opts) do defp tag_opts(name, opts) do
classes = "#{Keyword.get(opts, :class, "")} #{name}" |> String.trim_leading() Keyword.update(opts, :class, name, fn c -> "#{c} #{name}" end)
styles = Keyword.get(opts, :style)
width = Keyword.get(opts, :width)
height = Keyword.get(opts, :height)
id = Keyword.get(opts, :id)
[class: classes]
|> prepend_if(styles, {:style, styles})
|> prepend_if(width, {:style, width})
|> prepend_if(height, {:style, height})
|> prepend_if(id, {:id, id})
end end
end end

View file

@ -1,3 +1,10 @@
defmodule Bones73kWeb.LayoutView do defmodule Bones73kWeb.LayoutView do
use Bones73kWeb, :view use Bones73kWeb, :view
def nav_link_opts(conn, opts) do
case Keyword.get(opts, :to) == Phoenix.Controller.current_path(conn) do
false -> opts
true -> Keyword.update(opts, :class, "active", fn c -> "#{c} active" end)
end
end
end end