Packages
moon
2.90.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/slim_menu_link.ex
defmodule Moon.Parts.Sidebar.SlimMenuLink do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Design.MenuItem
alias Moon.Icon
alias Moon.Design.Tooltip
prop(active, :boolean, default: false)
prop(tooltip_text, :string, default: "")
prop(is_collapsed, :boolean, default: false)
@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(icon_class, :css_class)
@doc "Additional Tailwind classes"
prop(tooltip_class, :css_class)
@doc "Route to redirect to"
prop(route, :any)
@doc "Icon name"
prop(icon_name, :any)
@doc "Additional attributes set for the tag a"
prop(attrs, :map, default: %{})
@doc "Active page"
prop(active_page, :string, from_context: :active_page)
@doc "Some additional classes will be added to indicate is active"
prop(is_active, :boolean, default: false)
@doc "Add this as is_selected value and also work for underlying checkbox/radio"
prop(is_selected, :boolean, default: false)
def render(assigns) do
~F"""
<Tooltip {=@id} {=@testid} class="self-center">
<Tooltip.Trigger class="rounded-full h-12 w-12">
<MenuItem
as="a"
class={merge([
[
"bg-goku text-bulma justify-start rounded-full p-3 gap-3 h-12 w-12",
"bg-bulma text-goku hover:bg-bulma": @is_active || @is_selected
],
@class
])}
attrs={Map.merge(
%{
"data-phx-link": "redirect",
"data-phx-link-state": "push",
"aria-selected": false
},
@attrs
)}
href={@route}
>
<Icon name={@icon_name} class={merge(["text-moon-24", @icon_class])} />
</MenuItem>
</Tooltip.Trigger>
<Tooltip.Content
position="right"
class={merge(["bg-bulma text-goku z-[19999] mt-1 invisible lg:visible", @tooltip_class])}
>{@tooltip_text}<Tooltip.Arrow class="ms-1" />
</Tooltip.Content>
</Tooltip>
"""
end
end