Packages
moon
2.80.1
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon/parts/sidebar/bottom_navigation.ex
defmodule Moon.Parts.Sidebar.BottomNavigation do
@moduledoc false
use Moon.StatelessComponent, slot: "button"
alias Moon.Icon
alias Moon.Design.Chip
@doc "Id attribute for DOM element"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Additional Tailwind classes"
prop(button_class, :css_class)
@doc "Additional Tailwind classes"
prop(logo_class, :css_class)
@doc "Additional Tailwind classes"
prop(icon_class, :css_class)
@doc "Source of the svg"
prop(src, :string, required: true)
@doc "Icon name"
prop(icon, :string)
@doc "Href attribute for Logo"
prop(href, :string)
@doc "On click event to open sidebar"
prop(on_click, :event)
def render(assigns) do
~F"""
<div
{=@id}
data-testid={@testid}
class={merge([
"fixed bottom-12 z-[9999] justify-center lg:hidden items-center left-1/2 transform -translate-x-1/2 bg-bulma rounded-full flex flex-row p-1 gap-0 h-14 w-[6.5rem]",
"theme-moon-light",
@class
])}
>
<a href={@href}>
<Chip class={merge([
"bg-transparent h-12 w-12 px-2 py-2 justify-center items-center rounded-full",
@button_class
])}>
<svg class={merge([
"moon-logo h-8 w-8 text-goku hover:text-goku active:text-goku focus:text-goku",
@logo_class
])}>
<use href={@src} />
</svg>
</Chip>
</a>
<Chip
class={merge([
"bg-transparent h-12 w-12 px-2 py-2 justify-center items-center rounded-full",
@button_class
])}
{=@on_click}
>
<Icon name={@icon || "generic_menu"} class={merge(["text-moon-24 text-goku", @icon_class])} />
</Chip>
</div>
"""
end
end