use topbar component

lib/lokal_web/component/topbar.ex

@@ -1,4 +1,4 @@
-defmodule LokalWeb.Component.Topbar do
+defmodule LokalWeb.Components.Topbar do
   @moduledoc """
   Phoenix.Component for rendering an interactive topbar
   Assign

lib/lokal_web/templates/layout/app.html.heex

@@ -1,16 +1,19 @@
-<main class="container h-full w-full">
-  <header class="mb-4 px-8 py-4 w-full bg-primary-400">
-    <%= render("topbar.html", assigns) %>
+<main class="m-0 p-0 w-full h-full">
+  <header>
+    <.topbar current_user={assigns[:current_user]}></.topbar>
+
     <%= if get_flash(@conn, :info) do %>
       <p class="alert alert-info" role="alert">
         <%= get_flash(@conn, :info) %>
       </p>
     <% end %>
+
     <%= if get_flash(@conn, :error) do %>
       <p class="alert alert-danger" role="alert">
         <%= get_flash(@conn, :error) %>
       </p>
     <% end %>
   </header>
+
   <%= @inner_content %>
 </main>

lib/lokal_web/templates/layout/live.html.heex

@@ -1,15 +1,19 @@
 <main class="m-0 p-0 w-full h-full">
-  <LokalWeb.Component.Topbar.topbar current_user={assigns[:current_user]}>
-  </LokalWeb.Component.Topbar.topbar>
-  <%= if @flash && @flash |> Map.has_key?(:info) do %>
-    <p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info">
-      <%= live_flash(@flash, :info) %>
-    </p>
-  <% end %>
-  <%= if @flash && @flash |> Map.has_key?(:error) do %>
-    <p class="alert alert-danger" role="alert" phx-click="lv:clear-flash" phx-value-key="error">
-      <%= live_flash(@flash, :error) %>
-    </p>
-  <% end %>
+  <header>
+    <.topbar current_user={assigns[:current_user]}></.topbar>
+
+    <%= if @flash && @flash |> Map.has_key?(:info) do %>
+      <p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info">
+        <%= live_flash(@flash, :info) %>
+      </p>
+    <% end %>
+
+    <%= if @flash && @flash |> Map.has_key?(:error) do %>
+      <p class="alert alert-danger" role="alert" phx-click="lv:clear-flash" phx-value-key="error">
+        <%= live_flash(@flash, :error) %>
+      </p>
+    <% end %>
+  </header>
+
   <%= @inner_content %>
 </main>

lib/lokal_web/templates/layout/topbar.html.heex

@@ -1,41 +0,0 @@
-<nav role="navigation">
-  <div class="flex flex-row justify-between items-center space-x-4">
-    <%= link to: Routes.live_path(LokalWeb.Endpoint, PageLive) do %>
-      <h1 class="leading-5 text-xl text-white hover:underline">Lokal</h1>
-    <% end %>
-
-    <ul class="flex flex-row flex-wrap justify-center items-center
-      space-x-4 text-lg text-white">
-      <%# user settings %>
-      <%= if assigns |> Map.has_key?(:current_user) && @current_user do %>
-        <li>
-          <%= @current_user.email %>
-        </li>
-        <li>
-          <%= link "Settings", class: "hover:underline",
-            to: Routes.user_settings_path(LokalWeb.Endpoint, :edit) %>
-        </li>
-        <li>
-          <%= link "Log out", class: "hover:underline",
-            to: Routes.user_session_path(LokalWeb.Endpoint, :delete), method: :delete %>
-        </li>
-
-        <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
-          <li>
-            <%= link "LiveDashboard", class: "hover:underline",
-              to: Routes.live_dashboard_path(LokalWeb.Endpoint, :home) %>
-          </li>
-        <% end %>
-      <% else %>
-        <li>
-          <%= link "Register", class: "hover:underline",
-            to: Routes.user_registration_path(LokalWeb.Endpoint, :new) %>
-        </li>
-        <li>
-          <%= link "Log in", class: "hover:underline",
-            to: Routes.user_session_path(LokalWeb.Endpoint, :new) %>
-        </li>
-      <% end %>
-    </ul>
-  </div>
-</nav>

lib/lokal_web/views/layout_view.ex

@@ -1,6 +1,6 @@
 defmodule LokalWeb.LayoutView do
   use LokalWeb, :view
-  alias LokalWeb.PageLive
+  import LokalWeb.Components.Topbar
 
   # Phoenix LiveDashboard is available only in development by default,
   # so we instruct Elixir to not warn if the dashboard route is missing.