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 """
Phoenix.Component for rendering an interactive topbar
Assign

View File

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

View File

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

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