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

lib/bones73k/util/list.ex

@@ -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

lib/bones73k_web/templates/layout/_navbar.html.eex

@@ -2,7 +2,7 @@
   <div class="container">
 
     <%= 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
     <% end %>
 
@@ -12,29 +12,45 @@
 
     <div class="collapse navbar-collapse" id="navbarSupportedContent" phx-update="ignore">
       <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+
         <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>
-        </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">
-          <a class="nav-link" href="#">Link</a>
+          <%= link "LiveDashboard", nav_link_opts(@conn, to: Routes.live_dashboard_path(@conn, :home), class: "nav-link") %>
           </li>
+        <% end %>
+
         <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="#">Another action</a></li>
             <li><hr class="dropdown-divider"></li>
             <li><a class="dropdown-item" href="#">Something else here</a></li>
           </ul>
         </li>
-        <li class="nav-item">
+
-          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
-        </li>
       </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>
 </nav>

lib/bones73k_web/templates/layout/_user_menu.html.eex

@@ -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>

lib/bones73k_web/templates/layout/navbar/_user_menu.html.eex

@@ -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>

lib/bones73k_web/templates/layout/root.html.leex

@@ -13,18 +13,6 @@
 
     <%= 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 %>
 
   </body>

lib/bones73k_web/views/icon_helper.ex

@@ -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

lib/bones73k_web/views/icon_helpers.ex

@@ -4,7 +4,6 @@ defmodule Bones73kWeb.IconHelpers do
   """
 
   use Phoenix.HTML
-  import Bones73k.Util.List
   alias Bones73kWeb.Router.Helpers, as: Routes
 
   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
     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
 
   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

lib/bones73k_web/views/layout_view.ex

@@ -1,3 +1,10 @@
 defmodule Bones73kWeb.LayoutView do
   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