Packages
phoenix_webcomponent
2.8.0
3.2.4
3.2.3
3.2.2
3.2.1
3.2.0
3.1.5
3.1.4
3.1.3
3.1.2
3.1.1
3.1.0
2.8.0
2.7.0
2.6.0
2.5.4
2.5.3
2.5.2
2.5.1
2.5.0
2.4.0
2.3.6
2.3.5
2.3.4
2.3.3
2.3.2
2.3.1
2.2.3
2.2.2
2.2.1
2.2.0
2.1.4
2.1.3
2.1.2
2.1.1
2.1.0
2.0.0
1.6.3
1.6.2
1.6.1
1.6.0
1.5.1
1.5.0
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.0
1.2.0
1.1.1
1.1.0
1.0.0
1.0.0-beta.4
1.0.0-beta.3
1.0.0-beta.2
0.0.0
Phoenix view functions for working with WebComponent
Current section
Files
Jump to
Current section
Files
lib/phoenix_webcomponent/left_menu.ex
defmodule Phoenix.WebComponent.LeftMenu do
@moduledoc """
Render left menu.
"""
use Phoenix.WebComponent, :html
@doc """
Generates left menu
## Example
<.wc_left_menu
class="w-[200px] bg-[rgba(255,255,255,.7)] text-[14px]"
active="actionbar"
>
<:title class="text-[#A1A7C4]">Phx WebComponents</:title>
<:menu>actionbar</:menu>
<:menu>appbar</:menu>
</.wc_left_menu>
"""
@doc type: :component
attr(:id, :any,
default: false,
doc: """
html attribute id
"""
)
attr(:class, :string,
default: "",
doc: """
html attribute class
"""
)
attr(:active, :string,
default: "",
doc: """
actvie menu id
"""
)
slot(:title,
required: false,
doc: """
Render menu title.
"""
) do
attr(:class, :string)
end
slot(:menu,
required: false,
doc: """
Render menu
"""
)
def wc_left_menu(assigns) do
~H"""
<nav
id={@id}
class={[
"flex flex-col justify-start items-start",
"h-full pt-4",
@class,
]}
>
<%= if length(@title) > 0 do %>
<div
:for={{title, _i} <- Enum.with_index(@title)}
class={[
"flex flex-row justify-start items-center",
"px-10 py-4 w-full",
Map.get(title, :class, ""),
]}
>
<%= render_slot(title) %>
</div>
<% end %>
<div
:for={{m, _i} <- Enum.with_index(@menu)}
class="flex flex-col justify-start items-start w-full"
>
<%= render_slot(m) %>
</div>
</nav>
"""
end
@doc """
Generates left menu Group
## Example
<.wc_left_menu_group active={"mdi"}>
<:title>Icons</:title>
<:menu id="mdi" to={~p"/icons/mdi"}>MD Icon</:menu>
<:menu id="bsi" to={~p"/icons/bsi"}>BS Icon</:menu>
</.wc_left_menu_group>
"""
@doc type: :component
attr(:id, :any,
default: false,
doc: """
html attribute id
"""
)
attr(:class, :string,
default: "",
doc: """
html attribute class
"""
)
attr(:active, :string,
default: "",
doc: """
actvie menu id
"""
)
slot(:title,
required: true,
doc: """
Render menu title.
"""
) do
attr(:class, :string)
end
slot(:menu,
required: false,
doc: """
Render menu
"""
) do
attr(:id, :string)
attr(:class, :string)
attr(:to, :string)
end
def wc_left_menu_group(assigns) do
assigns =
assigns
|> assign_new(:title, fn -> nil end)
~H"""
<div
id={@id}
class={[
"flex flex-col justify-start items-start",
"w-full",
@class,
]}
>
<div
:for={{title, _i} <- Enum.with_index(@title)}
class={[
"px-10 py-4 w-full",
Map.get(title, :class, ""),
]}
>
<%= render_slot(@title) %>
</div>
<div class="text-slate-800 px-4 w-full">
<.link
:for={{m, _i} <- Enum.with_index(@menu)}
class={[
"flex flex-row justify-start items-center",
"px-6 py-4 rounded-lg w-full cursor-pointer",
if(Map.get(m, :id, "") == @active, do: " bg-blue-100 text-blue-500 hover:text-blue-600", else: "hover:text-blue-600 "),
Map.get(m, :class, "")
]}
navigate={Map.get(m, :to, "")}
>
<span class="indent-2.5 flex flex-row justify-start items-center">
<%= render_slot(m) %>
</span>
</.link>
</div>
</div>
"""
end
end