Packages
phoenix_duskmoon
5.2.0-beta.1
9.9.2
9.9.1
9.9.0
9.8.0
9.7.1
9.7.0
9.6.4
9.6.3
9.6.2
9.6.1
9.6.0
9.5.4
9.5.3
9.5.2
9.5.1
9.5.0
9.4.3
9.4.2
9.4.1
9.4.0
9.3.0
9.2.0
9.1.4
9.1.3
9.1.1
9.1.1-rc.1
retired
9.0.1
9.0.0-rc.3
9.0.0-rc.2
9.0.0-rc.1
8.0.0
7.2.1
7.2.0
7.1.3
7.1.2
7.1.1
6.3.2
6.3.1
6.3.0
6.2.0
6.1.3
6.1.2
6.1.1
6.1.0
6.0.10
6.0.9
6.0.8
6.0.7
6.0.6
6.0.5
6.0.4
6.0.3
6.0.2
6.0.1
6.0.0
5.2.0-beta.5
5.2.0-beta.4
5.2.0-beta.3
5.2.0-beta.2
5.2.0-beta.1
5.1.0
5.0.6
5.0.5
5.0.4
5.0.3
5.0.2
5.0.1
5.0.0
4.6.6
4.6.5
4.6.4
4.6.3
4.6.2
4.6.1
4.6.0
4.5.2
4.5.1
4.5.0
4.4.4
4.4.3
4.4.2
4.4.1
4.4.0
4.3.2
4.3.1
4.3.0
4.2.0
4.1.1
4.1.0
4.0.0
Duskmoon UI component library for Phoenix LiveView
Current section
Files
Jump to
Current section
Files
lib/phoenix_duskmoon/component/page_header.ex
defmodule PhoenixDuskmoon.Component.PageHeader do
@moduledoc """
render Page Header
"""
use PhoenixDuskmoon.Component, :html
@doc """
Generates a Page header.
## Example
<.dm_page_header>
<:menu to={~p"/storybook"}>
Storybook
</:menu>
<:user_profile>
(^_^)
</:user_profile>
</.dm_page_header>
"""
@doc type: :component
attr(:id, :string,
default: "wc-page-header-header",
doc: """
html attribute id
"""
)
attr(:nav_id, :string,
default: "wc-page-header-nav",
doc: """
nav html attribute id
"""
)
attr(:class, :any,
default: "",
doc: """
html attribute class
"""
)
attr(:nav_class, :any,
default: "",
doc: """
nav html attribute class
"""
)
slot(:menu,
required: false,
doc: """
Appbar menus
"""
) do
attr(:class, :string)
attr(:to, :string)
end
slot(:user_profile,
required: false,
doc: """
Appbar right side user_profile.
"""
) do
attr(:class, :string)
end
def dm_page_header(assigns) do
~H"""
<nav
id={@nav_id}
class={[
"w-full h-12",
"flex items-center flex-none",
"transition-all",
"fixed hidden",
@nav_class
]}
>
<div
class={[
"container mx-auto",
"hidden lg:flex flex-row justify-between items-center"
]}
>
<div class="flex flex-row gap-4">
<a
:for={menu <- @menu}
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>
</div>
<div
:for={user_profile <- @user_profile}
class={["flex", Map.get(user_profile, :class, "")]}
>
<%= render_slot(user_profile) %>
</div>
</div>
<div
class={[
"container px-8 h-full relative",
"flex lg:hidden flex-col justify-center items-center"
]}
>
<label for="mobile-menu">
<PhoenixDuskmoon.Component.Icons.dm_mdi name="menu" class="w-8 h-8 cursor-pointer" />
</label>
<input class="hidden peer" id="mobile-menu" type="checkbox" />
<div
class={[
"hidden peer-checked:flex flex-col items-center",
"absolute top-12 left-0 right-0",
@nav_class
]}
>
<a
:for={menu <- @menu}
class={[
"py-2 px-12 w-full",
"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>
<hr />
<div
:for={user_profile <- @user_profile}
class={[
"py-2 px-12 w-full",
"text-lg font-semibold leading-6",
"hover:opacity-50 flex justify-center",
Map.get(user_profile, :class, "")
]}
>
<%= render_slot(user_profile) %>
</div>
</div>
</div>
</nav>
<header
id={@id}
class={[
"w-full min-h-fit",
"flex flex-col",
@class
]}
>
<nav class={["w-full h-12", "flex items-center flex-none"]}>
<div
class={[
"container mx-auto",
"hidden lg:flex flex-row justify-between items-center"
]}
>
<div class={["flex flex-row gap-4"]}>
<a
:for={menu <- @menu}
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>
</div>
<div
:for={user_profile <- @user_profile}
class={["flex", Map.get(user_profile, :class, "")]}
>
<%= render_slot(user_profile) %>
</div>
</div>
<div
class={[
"container px-8 relative",
"flex lg:hidden flex-row justify-between items-center"
]}
>
<label for="dm-mobile-menu-control">
<PhoenixDuskmoon.Component.Icons.dm_mdi name="menu" class="w-8 h-8" />
</label>
<input class="hidden peer" id="dm-mobile-menu-control" type="checkbox" />
<div
class={[
"hidden peer-checked:flex flex-col items-start",
"absolute top-12 left-0 right-0",
@class
]}
>
<a
:for={menu <- @menu}
class={[
"py-2 px-12 w-full",
"text-lg font-semibold leading-6",
"hover:opacity-50",
Map.get(menu, :class, "")
]}
href={Map.get(menu, :to, false)}
>
<%= render_slot(menu) %>
</a>
<div
:for={user_profile <- @user_profile}
class={[
"py-2 px-12 w-full",
"text-lg font-semibold leading-6",
"hover:opacity-50",
Map.get(user_profile, :class, "")
]}
>
<%= render_slot(user_profile) %>
</div>
</div>
</div>
</nav>
<div class="flex-1 flex flex-col justify-center items-center">
<%= render_slot(@inner_block) %>
</div>
</header>
<script type="module">
(function() {
function respondToVisibility(element, callback) {
var list = [];
for(let i = 0; i <= 10; i++) {
list.push(i / 10);
}
var options = {
root: null,
rootMargin: "0px",
threshold: list,
};
var observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
callback(entry.intersectionRatio);
});
}, options);
observer.observe(element);
}
var nid = '<%= @nav_id %>';
var hid = '<%= @id %>';
var nel = document.getElementById(nid);
var hel = document.getElementById(hid);
respondToVisibility(hel, function(intersectionRatio) {
if (intersectionRatio <= 0.5) {
nel.classList.remove('hidden');
nel.style.opacity = 1 - intersectionRatio;
} else {
nel.classList.add('hidden');
}
});
})();
</script>
"""
end
end