use topbar component

This commit is contained in:
shibao 2022-02-13 21:28:20 -05:00 committed by oliviasculley
parent 8ff1fd0276
commit 7283932d85
5 changed files with 24 additions and 58 deletions

View File

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

View File

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

View File

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

View File

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

View File

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