defmodule Phoenix.WebComponent.Appbar do
@moduledoc """
render appbar
"""
use Phoenix.WebComponent, :html
import Phoenix.WebComponent.Link
import Phoenix.WebComponent.Icons
@doc """
Generates a html customElement appbar.
## Example
<.wc_appbar
title={"Phoenix WebComponent"}
>
<:menu to={~p"/storybook"}>
Component Storybook
</:menu>
<:logo>
<logo-gsmlg-dev />
</:logo>
<:user_profile>
(^_^)
</:user_profile>
</.wc_appbar>
"""
@doc type: :component
attr(:id, :any,
default: false,
doc: """
html attribute id
"""
)
attr(:class, :any,
default: "",
doc: """
html attribute class
"""
)
attr(:title, :string,
default: "",
doc: """
Appbar title.
"""
)
slot(:menu,
required: false,
doc: """
Appbar menus
"""
) do
attr(:class, :string)
attr(:to, :string)
end
slot(:logo,
required: false,
doc: """
Appbar Logo.
"""
)
slot(:user_profile,
required: false,
doc: """
Appbar right side user_profile.
"""
)
def wc_appbar(assigns) do
assigns =
assigns
|> assign_new(:logo, fn -> [] end)
|> assign_new(:user_profile, fn -> [] end)
~H"""
<app-bar id={@id} class={@class} app-name={@title}>
<nav slot="logo" class="flex justify-center">
<%= render_slot(@logo) %>
</nav>
<%= for menu <- @menu do %>
<.wc_link
navigate={Map.get(menu, :to, "")}
class={Map.get(menu, :class, "")}
slot="nav"
>
<%= render_slot(menu) %>
</.wc_link>
<% end %>
<span slot="user">
<%= render_slot(@user_profile) %>
</span>
</app-bar>
"""
end
@doc """
Generates an simple html appbar.
## Example
<.wc_simple_appbar
title={"Phoenix WebComponent"}
>
<:menu to={~p"/storybook"}>
Component Storybook
</:menu>
<:logo>
<logo-gsmlg-dev />
</:logo>
<:user_profile>
(^_^)
</:user_profile>
</.wc_simple_appbar>
"""
@doc type: :component
attr(:id, :any,
default: false,
doc: """
html attribute id
"""
)
attr(:class, :any,
default: "",
doc: """
html attribute class
"""
)
attr(:title, :string,
default: "",
doc: """
Appbar title.
"""
)
slot(:menu,
required: false,
doc: """
Appbar menus
"""
) do
attr(:class, :string)
attr(:to, :string)
end
slot(:logo,
required: false,
doc: """
Appbar Logo.
"""
)
slot(:user_profile,
required: false,
doc: """
Appbar right side user_profile.
"""
)
def wc_simple_appbar(assigns) do
assigns =
assigns
|> assign_new(:logo, fn -> [] end)
|> assign_new(:home, fn -> false end)
|> assign_new(:user_profile, fn -> [] end)
~H"""
<header
id={@id}
class={[
"h-14 w-screen text-xl",
"flex items-center justify-center relative",
@class
]}
>
<div class="container h-full flex items-center justify-between select-none">
<div class="flex flex-row items-center justify-start">
<%= render_slot(@logo) %>
<h1 class="select-none text-blod hidden lg:inline-flex">
<%= @title %>
</h1>
<nav class="mx-12 hidden md:flex flex-row items-center gap-4">
<%= for menu <- @menu do %>
<a
class={[
"py-2 px-6",
"text-lg font-semibold leading-6 text-center",
"hover:opacity-50",
Map.get(menu, :class, "")
]}
href={Map.get(menu, :to, false)}
>
<%= render_slot(menu) %>
</a>
<% end %>
</nav>
</div>
<div class="flex flex-row items-center justify-end">
<div
class="hidden md:inline-flex"
><%= render_slot(@user_profile) %></div>
<button
class={[
"inline-flex justify-center items-center",
"md:hidden w-10 h-10",
]}
onclick="document.getElementById('header-md-menu').classList.toggle('hidden')"
>
<.wc_mdi name="menu" class="w-8 h-8" />
</button>
</div>
</div>
<div
id="header-md-menu"
class={[
"absolute z-50 top-14 w-full",
"flex flex-col",
"md:hidden hidden",
@class
]}
>
<hr />
<%= for menu <- @menu do %>
<a
class={[
"w-full py-2 px-6",
"font-semibold leading-6",
"text-lg text-center",
Map.get(menu, :class, "")
]}
>
<%= render_slot(menu) %>
</a>
<% end %>
<hr />
<div
class="w-full my-2 text-center flex flex-col justify-start items-center"
><%= render_slot(@user_profile) %></div>
</div>
</header>
"""
end
end
